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"
  },

执行