Webpack Bundle Analyzer包分析器

当我们需要分析打包文件dist里哪些资源可以进一步优化时，就可以使用包分析器插件webpack-bundle-analyzer。NPM上的介绍是 使用交互式可缩放树图可视化 webpack 输出文件的大小

前提环境

• vue 3.0.0
• @vue/cli 4.5.15

webpack-bundle-analyzer插件的安装

$ npm install --save-dev webpack-bundle-analyzer

查看bundle分析的几种方式

1. 第一种，运行完并开启本地服务查看

1. 在 webpack.config.js 中找到 chainWebpack，加入以下配置，无需改动 package.json

   module.exports = {
       chainWebpack: config => {
           // 配置包分析器
           config.plugin('webpack-bundle-analyzer')
           .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
       }
   }
   

2. npm run serve 重新运行项目（运行指令具体看项目配置）

3. 浏览器会自动打开127.0.0.1:8888（我们手动输入localhost:8888也是可以的）

这种方式快速便捷，不会生成 stats.json 文件，但是只能看到每一个文件的 Stat size，而且运行完浏览器自动打开的不是项目本身

2. 第二种，构建完并开启本地服务查看

1. 在 webpack.config.js 中找到 chainWebpack，加入以下配置

   module.exports = {
       chainWebpack: config => {
           // 配置包分析器
           config.plugin('webpack-bundle-analyzer')
           .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
       }
   }
   

2. 在 package.json 中，找到 scripts，添加

   "analyz": "NODE_ENV=production vue-cli-service build --mode production",
   或
   "analyz": "NODE_ENV=production npm run build",
   

3. npm run analyz 开始构建打包 发现报错了（此时 npm run build 却是正常且浏览器也会自动打开127.0.0.1:8888），这是因为windows系统不能识别设置环境变量的指令，需要使用一个插件cross-env

   cross-env 是运行跨平台设置和使用环境变量的脚本，能够提供一个设置环境变量的 scripts，让你能够以 unix 方式设置环境变量，然后在 windows 上也能兼容运行** 3.1 安装 cross-env 插件

   $ npm install cross-env --save-dev
   

   3.2 回到 package.json 中，找到 scripts，将刚才的 analyz 加上 cross-env 即可

   "analyz": "cross-env NODE_ENV=production vue-cli-service build --mode production",
   或
   "analyz": "cross-env NODE_ENV=production npm run build",
   

   3.3 继续执行 npm run analyz，浏览器会自动打开127.0.0.1:8888（我们手动输入localhost:8888也是可以的） 这种方式同样也不会生成 stats.json 文件，除此之外，还能看到每一个文件的 Stat size、Parsed size、Gzipped size三种格式的文件大小

3. 第三种，生成html文件

1. 在 webpack.config.js 中引入BundleAnalyzerPlugin，并找到 configureWebpack，加入以下配置

   // vue.config.js
   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
   
   module.exports = {
       configureWebpack: {
           plugins: [
               // 配置包分析器
               new BundleAnalyzerPlugin({
                   analyzerMode: 'static',
                   // analyzerMode: 'server',
                   // analyzerMode: 'disabled',
                   // analyzerHost: '127.0.0.1',
                   // analyzerPort: 8888,
                   reportFilename: 'report.html',
                   defaultSizes: 'gzip',
                   generateStatsFile: true, // 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
                   openAnalyzer: false, // 默认在浏览器中自动打开报告
                   statsFilename: 'stats.json', // 如果generateStatsFile为true，将会生成Webpack Stats JSON文件的名字
                   statsOptions: { source: false }
               })
           ]
       }
   }
   

2. 在 package.json 中，找到 scripts，添加

   "analyz": "cross-env NODE_ENV=production vue-cli-service build --mode production",
   或
   "analyz": "cross-env NODE_ENV=production npm run build",
   

3. npm run analyz 开始构建打包，完成后，我们发现在 dist 文件夹里生成了一个 report.html 文件与stats.json 文件
4. 双击打开 report.html 文件

这种方式会生成 stats.json 文件（很大，部署时需要移除），除此之外，还能看到每一个文件的 Stat size、Parsed size、Gzipped size三种格式的文件大小

优化

上述方式，要不自动打开浏览器，要不就自动在dist包里生成一个很大的stats.json 文件，怎么样才能使用包分析器的同时还不影响我们使用npm run serve与npm run build呢？ 答案是创建一个环境文件

总结

通过使用这个webpack-bundle-analyzer包分析器可以看到项目各模块的大小，我们就可以按需优化了