前端优化-vue-cli4安装webpack-bundle-analyzer分析包文件

使用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"

},
           

执行

然后运行npm run analyzer。但是我运行后发现报错了。如下：

原来由于windows下不支持xxx=xxx这种写法。为了支持这种写法，用npm安装cross-env。然后修改package.json，如下:

"analyzer": "cross-env use_analyzer=true npm run serve"
           

再次运行npm run analyzer，发现运行成功，打开127.0.0.1就可以看到包的情况：

注：上述已是优化后看到的图，未优化前，element-ui和v-charts占用了很大的控件。针对这两个插件做了优化后（采用CDN方式），app.js小了很多。