前言
最近有人給我的 Vue2 後臺管理系統解決方案 提了 issue ，說執行 npm run build 構建項目的時候極其慢，然後就引起我的注意了。在項目中，引入了比較多的第三方庫，導致項目大，而每次修改，都不會去修改到這些庫，構建卻都要再打包這些庫，浪費了不少時間。所以，把這些不常變動的第三方庫都提取出來，下次 build 的時候不再構建這些庫，這樣既可大大縮短構建時間。那麼要怎麼去實現呢？
解決方案
DllPlugin 和 DllReferencePlugin
查找了一下資料，發現我們可以利用 webpack 的插件 DllPlugin 和 DllReferencePlugin 來實現我們要的功能。
DllPlugin 可以把我們需要打包的第三方庫打包成一個 js 文件和一個 json 文件，這個 json 文件中會映射每個打包的模塊地址和 id，DllReferencePlugin 通過讀取這個json文件來使用打包的這些模塊。
接下來就看如何實現。
配置文件
在 build 文件夾中新建 webpack.dll.config.js (項目基於 vue-cli 的)
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
vendor: ['vue/dist/vue.common.js','vue-router', 'babel-polyfill','axios','vue-echarts-v3']
},
output: {
path: path.join(__dirname, '../static/js'),
filename: '[name].dll.js',
library: '[name]_library' // vendor.dll.js中暴露出的全局變量名
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};然後在 package.json 中配置命令
"scripts": {
...
"build:dll": "webpack --config build/webpack.dll.conf.js"
}執行 npm run build:dll 命令來生成 vendor.dll.js 和 vendor-manifest.json
需要在 index.html 引入 vendor.dll.js
<body>
<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>
</body>vendor-manifest.json 的內容大概如下：
{
"name": "vendor_library",
"content": {
"./node_modules/core-js/modules/_export.js": {
"id": 0,
"meta": {}
},
...
}接下來就在 webpack.base.config.js 中通過 DLLReferencePlugin 來使用 DllPlugin 生成的 DLL Bundle
var webpack = require('webpack');
module.exports = {
entry: {
app: ['./src/main.js']
},
module: {
...
}
// 添加DllReferencePlugin插件
plugins: [
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '..'),
manifest: require('./vendor-manifest.json')
}),
]
}原先 build 需要 95446ms，配置之後執行 build 只需 14360ms，減少了 75% 的時間。
但是存在一個問題，當把太多的第三方依賴都打包到 vendor.dll.js 中去，該文件太大也會影響首屏加載時間。所以要權衡利弊，可以異步加載的插件就沒有必要打包進來了，不要一味的把所有都打包到這裏面來獲取構建時的快感。