vue-cli3安装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小了很多。