前言
使用vue-cli3创建了一个工程目录,技术栈为vue-cli3+vue-router+vuex+element-ui+v-charts+axios。但是等到项目开发完后,发现生成的app.js特别大,接近10M。为了优化项目性能,需要使用webpack-bundle-analyzer分析包文件,找出最占用空间的插件有哪些,对应做出优化。
安装
cnpm install webpack-bundle-analyzer -D
修改vue.config.js
module.exports = {
chainWebpack: config => {
if (process.env.use_analyzer) { // 分析
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
}
修改package.json
"scripts": {
"analyzer": "use_analyzer=true npm run serve"
},
执行