根目錄下新建webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
/**
* 加快開發(fā)時的構(gòu)建速度
* 第一次yarn start的時候會構(gòu)建整個包
* 以后再構(gòu)建阐滩，會先從ddl中找
*
* 當下面這些庫版本升級的時候
* 執(zhí)行一下 npm run ddl 就可以了
*/
module.exports = {
entry: {
vendor: [
'vue-router/dist/vue-router.esm.js',
'vuex/dist/vuex.esm.js',
'axios',
'vue',
'element-ui',
'echarts'
]
},
output: {
path: path.join(__dirname, 'public/vendor'),
filename: '[name].dll.js',
library: '[name]_[hash]' // vendor.dll.js中暴露出的全局變量名
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'public/vendor', '[name]-manifest.json'),
name: '[name]_[hash]',
context: process.cwd()
})
]
}
package.json新增一條命令，要安裝webpack-cli
"dll": "webpack --config ./webpack.dll.conf.js"
執(zhí)行 npm run dll, 會在public中生成vender文件夾
vue.config.js: configureWebpack增加配置
config.plugins = [
...config.plugins,
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require('./public/vendor/vendor-manifest.json')
})
]
public 下的index.html引入一下文件, 只在開發(fā)環(huán)境生效
<% if (process.env.NODE_ENV === 'development' ) { %>
<script src="./vendor/vendor.dll.js"></script>
<% } %>
