The
DllPlugin
andDllReferencePlugin
provide means to split bundles in a way that can drastically improve build time performance.javascript
DllPlugin
结合DllRefrencePlugin
插件的运用,对将要产出的bundle文件进行拆解打包,能够很完全地加快webpack的打包速度,从而在开发过程当中极大地缩减构建时间。html
结论先行:使用DllPlugin
和DllRefrencePlugin
进行构建,能够缩减50%~70%的构建时间。java
参考Demo:dllplugin-demojquery
main.js
引入了一个
jQuery
文件,图示打包耗时2.3s。
对比上面两张图打包的模块列表,图二有一行不同的输出:webpack
[0] delegated ./src/components/jquery.js from dll-reference vendor_57c12dcd8d9774596525 42 bytes {0} [built]
复制代码
这说明,这次的打包过程,没有从新打包jQuery
模块,而是直接从vendor_57c12dcd8d9774596525
中代理了。git
DllPlugin做用示意图: github
为了减少篇幅,只帖关键配置内容,详细访问dllplugin-demo:web
// webpack.dll.config.js
module.exports = {
entry: {
// 定义程序中打包公共文件的入口文件vendor.js
vendor: [path.resolve(src, 'js', 'vendor.js')],
},
plugins: [
new webpack.DllPlugin({
// manifest缓存文件的请求上下文(默认为webpack执行环境上下文)
context: process.cwd(),
// manifest.json文件的输出位置
path: path.join(src, 'js', 'dll', '[name]-manifest.json'),
// 定义打包的公共vendor文件对外暴露的函数名
name: '[name]_[hash]'
})
]
}
复制代码
在配置好webpack.dll.config.js
文件以后,在vendor.js
中声明项目程序中所引用的静态公共资源。shell
// vendor.js
// 引入自定义在项目目录中的公共资源(能够在配置中声明alias映射关系)
import 'jquery';
// or 引入npm包资源
// import 'Vue';
复制代码
// cross-env模块须要另外安装
cross-env NODE_ENV=production webpack --config webpack.dll.config.js --colors --display-modules
复制代码
根据webpack.dll.config.js
,会在指定位置生成vendor.dll.js
文件。npm
生成静态公共资源vendor.dll.js
以后,下一步就要在入口文件中关联引用,这项工做则是由DllRefrencePlugin
完成的。
// webpack.config.js
module.exports = {
entry: {
// 项目入口文件
'app':path.resolve(src, 'js', 'main.js')
},
plugins: [
// dllPlugin关联配置
new webpack.DllReferencePlugin({
// 跟dll.config里面DllPlugin的context一致
context: process.cwd(),
// dll过程生成的manifest文件
manifest: require(path.join(src, 'js', "dll", "vendor-manifest.json"))
})
]
}
复制代码
// main.js
// 引入的公共模块若是在vendor中有被引用过,那么编译的时候直接使用静态文件vendor.dll.js
import $ from 'jquery';
console.log($)
// import Vue from "Vue";
// console.log(Vue)
复制代码
引入方式没有什么不一样的,跟平时正常引入便可。
最后一步,在模板中注入vendor.dll.js
<!-- index.html -->
<script type="text/javascript" src="/src/js/dll/vendor.dll.js"></script>
复制代码
如此,在接下来的本地开发(dev过程)和线上构建过程,将再也不重复静态公共资源的构建,极大地缩减咱们的构建时间。
以上为webpack
(Version 4)使用过程当中的小小总结,欢迎刊误或提供优化建议~
参考: