因近期前端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中文網
