因近期前端vue项目采用jenkins进行自动化部署，导致开发时每次编译都需要花到4分钟到5分钟左右，于是在网上找了一个优化编译打包速度方法记录一下。
根据网上的n种方法发现还是DLLPlugin 和 DLLReferencePlugin最有效果最直接，而且配置方式简单，DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，提升了构建的速度。
1、首先在config文件夹下配置webpack.dll.config.js(内容如下)，要打包的模块的数组可以将一些较大的依赖放进vendor中
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: {
vendor: ['v-charts']
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
filename:'[name].dll.js', // vendor.dll.js中暴露出的全局变量名。
library:'[name]_library' // 与webpack.DllPlugin中的`name: '[name]_library',`保持一致。
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name:'[name]_library',
context: __dirname
}),
]};
2、在package.json的scripts加上
"dll": "webpack --config build/webpack.dll.config.js"
image
3、运行npm run dll就可以生成vendor-manifest.json和vendor.dll.js
image
4、然后在index.html中引入vendor.dll.js
<script src="./static/js/vendor.dll.js"></script>
然后就可以正常的进行编译打包，会发现将更多的依赖放到vendor，打包速度越快
优化前
image
优化后
image
大概平均可以节省三分之一的时间。参考webpack中文网
