├── .eslintrc.json ├── .gitignore ├── README.md ├── index.js └── package.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "airbnb-base", 4 | "env": { 5 | "node": true, 6 | "es6": true, 7 | "browser": true 8 | }, 9 | "parserOptions": { 10 | "ecmaVersion": 6, 11 | "sourceType": "module" 12 | }, 13 | "rules": { 14 | "arrow-body-style": [ 15 | "error", 16 | "as-needed" 17 | ], 18 | "arrow-parens": [ 19 | "error", 20 | "always" 21 | ], 22 | "comma-dangle": [ 23 | "error", 24 | "always-multiline" 25 | ], 26 | "indent": [ 27 | "error", 28 | 2, 29 | { 30 | "SwitchCase": 1, 31 | "MemberExpression": 1, 32 | "FunctionDeclaration": { 33 | "parameters": "first" 34 | }, 35 | "FunctionExpression": { 36 | "parameters": "first" 37 | }, 38 | "CallExpression": { 39 | "arguments": "first" 40 | }, 41 | "ArrayExpression": "first", 42 | "ObjectExpression": "first" 43 | } 44 | ], 45 | "no-multi-spaces": [ 46 | "error", 47 | { 48 | "exceptions": { 49 | "Property": true, 50 | "VariableDeclarator": true, 51 | "ImportDeclaration": true 52 | } 53 | } 54 | ], 55 | "max-len": "off", 56 | "newline-per-chained-call": "off", 57 | "no-console": "warn", 58 | "prefer-template": "error", 59 | "class-methods-use-this": "warn", 60 | "require-yield": "warn" 61 | } 62 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Tool for [Vue.js SSR apps](https://vuejs.org/v2/guide/ssr.html) that include other resources that may be handy to preload to improve performance. 2 | 3 | ![dependencies status](https://david-dm.org/shershen08/vue-preload/status.svg) 4 | 5 | ## Demo 6 | 7 | Using [vue-ssr-boilerplate](https://github.com/fenivana/vue-ssr-boilerplate) 8 | 9 | ## Install 10 | 11 | ```sh 12 | npm install vue-link-preload --save 13 | ``` 14 | 15 | ## Usage 16 | 17 | ```js 18 | import Preload from 'vue-link-preload' 19 | 20 | Vue.use(Preload) 21 | 22 | // dynamically add single item 23 | // by default the type 'script' is assigned 24 | Vue.addPreloadLink('https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js') 25 | 26 | // add multiple items at once 27 | Vue.preloadGroup({ 28 | script: [ 29 | 'https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js', 30 | 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js', 31 | ], 32 | style: ['https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap-reboot.min.css'], 33 | image: ['https://www.google.nl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'], 34 | }) 35 | ``` 36 | 37 | ## API 38 | 39 | **Vue.addPreloadLink(link,[ type])** 40 | 41 | Preload single resource. You can provide type and optionaly a callback on when the resource is available. 42 | 43 | **Vue.preloadGroup(resourseMap)** 44 | 45 | Preload group of resources of multiple types. The map keys are limited to valid preload asset types: 46 | script, style, image, media, document, font. 47 | 48 | ## See also 49 | 50 | - [smashingmagazine.com Preload: What Is It Good For? By Yoav Weiss](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/) 51 | - [current browser support for ['', 'script', 'style', 'image', 'media', 'document', 'font'].indexOf(type) > -1 5 | 6 | const domTokenListSupports = function() { 7 | try { 8 | return document.createElement('link').relList.supports('preload') 9 | } catch (e) { 10 | // link[rel=preload] is not supported 11 | } 12 | } 13 | 14 | VuePreload.install = function(Vue) { 15 | 16 | let isSupported; 17 | const init = function(){ 18 | isSupported = domTokenListSupports(); 19 | 20 | if(!isSupported) console.info('Current browser does not support link[rel=preload] functionality') 21 | } 22 | 23 | Vue.addPreloadLink = function(elementHref, elementAs) { 24 | if (!isSupported) return 25 | if (elementAs === undefined) elementAs = 'script' 26 | if (!validateAs(elementAs)) return 27 | 28 | const lnk = document.createElement('link') 29 | 30 | const rel = document.createAttribute('rel') 31 | rel.value = 'preload' 32 | lnk.setAttributeNode(rel) 33 | 34 | const as = document.createAttribute('as') 35 | as.value = elementAs 36 | lnk.setAttributeNode(as) 37 | 38 | const href = document.createAttribute('href') 39 | href.value = elementHref 40 | lnk.setAttributeNode(href) 41 | 42 | document.head.appendChild(lnk) 43 | } 44 | 45 | Vue.preloadGroup = function(resourcesMap) { 46 | for (const [key, value] of Object.entries(resourcesMap)) { 47 | if (validateAs(key) && value.length) { 48 | value.forEach(item => Vue.addPreloadLink(item, key)) 49 | } 50 | } 51 | } 52 | 53 | init() 54 | } 55 | 56 | 57 | export default VuePreload -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-link-preload", 3 | "version": "0.0.2", 4 | "description": "plugin for vuejs to utilize '