link-pre-webpack-plugin
介绍
该插件提供了更细致化的插入 link-pre 的功能,使用的时候需要将该插件放在其他的 html-template-plugin 也就是 html 模板处理的插件下方,并传入和 html 模板的插件相同的 filename 即可使用
经测试,能够使用在 html-webpack-plugin、web-webpack-plugin html 模板插件后使用
想像一个场景,多入口单页面文件,每个对应一个 template,在输入账号密码的页面可以预先加载登陆后的页面的资源,比如 login 页面增加了 preload:main,在输入完密码之后说不定 main 资源已经加载完成,登陆之后若需要请求 main 的 js 文件,直接通过 304 缓存中获取即可)
使用
插件专注处理一个 html 文件,若想对多个文件进行操作请创建多个实例并传入不同的 filename 即可
插件可以适配 optimization.splitChunks 和 mini-css-extract-plugin
参数说明
- filename:String html 文件的名称,一定要和传给其他 html 模板处理插件的 filename 相同
- preload:Object
- js:Object
- hrefs:Array
- 数字元素可以是一个
string
,代表了资源的CDN
地址hrefs: 'https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js' ... - 也可以传入更细致的参数,比如如上传入hrefs:href: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js'attrs: name: 'media' value: '(max-width: 600px)'
attrs
,插件内部会将其合并生成link-dom
,如上参数设置可以在media < 600px
的时候再加载
- 数字元素可以是一个
- chunks:Array
- 数字元素可以是一个
string
,代表了某一入口的entry name
,或者是splitChunks
的name
chunks: 'common-js' ... - 也可以和上面一样传入更细致的参数,比如chunks:chunk: 'main' // 代表了另一个入口的 entry nameattrs: name: 'media' value: '(max-width: 600px)'
- 数字元素可以是一个
- hrefs:Array
- css:Object
- hrefs:Array
- 和 js 类似
- chunks:Array
- 和 js 类似
- hrefs:Array
- js:Object
- prefetch:Object
- 和 preload 类似
参考配置
filename: 'login.html' preload: js: hrefs: href: 'https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js' href: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js' attrs: name: 'media' value: '(max-width: 600px)' chunks: chunk: 'common-js' chunk: 'main' attrs: name: 'media' value: '(max-width: 600px)' css: hrefs: href: 'https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css' href: 'https://cdn.bootcss.com/hover.css/2.3.1/css/hover-min.css' attrs: name: 'media' value: '(max-width: 600px)' chunks: chunk: 'common-style' attrs: name: 'media' value: '(max-width: 600px)' prefetch: js: hrefs: href: 'https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js' href: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js' chunks: chunk: 'common-js' chunk: 'main' css: hrefs: href: 'https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css' href: 'https://cdn.bootcss.com/hover.css/2.3.1/css/hover-min.css' chunks: chunk: 'common-style'
TODO
- css 的 publicPath 该怎么处理
- 能不能不使用 indexOf 作为判断依据,因为当公共模块的文件名和其他模块文件名重复的时候,依赖会加载错误
- 热更新 html,在 afterCompile 的时候把 html 添加监视热更新依赖
- 测试开发环境(webpack-dev-server)下是否能使用
- 加入判断参数是否传入正确的机制