vue-cli3配置webpack-bundle-analyze

webpack-bundle-analyzer的作用是可以直观分析打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何，针对这些，我们可以进行文件分割等操作。

配置webpack-bundle-analyze基本就以下三步：

第一步：安装插件

安装webpack-bundle-analyzer插件

npm install webpack-bundle-analyzer -D

第二步：配置脚本命令

在package.json里scripts配置脚本命令

"analyzer": "npm_config_report=true npm run build"

第三步：在vue.config.js中进行配置

vue.config.js是在项目根目录，默认vue-cli创建项目的时候没有，需要手动创建，配置内容如下：

module.exports = {
  ...
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      if (process.env.npm_config_report) {
        config
          .plugin("webpack-bundle-analyzer")
          .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin)
          .end();
      }
    }
  }
};

最后执行npm run analyzer即可。