解決webpack打包速度太慢
使用webpack插件webpack.DllPlugin與webpack.DllReferencePlugin將不需要改動的第三方插件與自己的業務代碼進行分開打包，
首先：
在項目根目錄新建一個文件webpack.dll.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
vendor: ['vue-router','vuex','vue/dist/vue.common.js','vue/dist/vue.js','vue-loader/lib/component-normalizer.js','vue']
},
output: {
path: path.resolve(base.path),
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.resolve('./dist', '[name]-manifest.json'),
name: '[name]_library'
})
]
};
將是用到的第三方插件添加到vendor中
然后：在webpack.config.js中添加代碼
plugins: [
new webpack.DllReferencePlugin({
manifest: require('./dist/vendor-manifest.json')
})
]
還需要在入口html文件中引入vendor.dll.js
<script type="text/javascript" src="./../vendor.dll.js"></script>
// 在package.json中添加
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"build:dll": "webpack --config webpack.dll.config.js"
-----------------------------------------------------
},
最后打包的時候首先執行npm run build:dll命令會在打包目錄下生成
vendor-manifest.json文件與vendor.dll.js文件。
Dll這個概念應該是借鑒了Windows系統的dll。一個dll包，就是一個純純的依賴庫，它本身不能運行，是用來給你的app引用的。
打包dll的時候，Webpack會將所有包含的庫做一個索引，寫在一個manifest文件中，而引用dll的代碼（dll user）在打包的時候，只需要讀取這個manifest文件，就可以了。
然后在執行npm run build
發現現在的webpack打包速度為2，3秒作用，與之前的20秒左右快了很多。
