性能分析webpack-bundle-analyzer

webpack插件的github地址是：

https://github.com/webpack-contrib/webpack-bundle-analyzer/

安装

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

package.json

 "dev": "cross-env  webpack-dev-server --open --config ./webpack.config.dev.js --color"
 "build": "cross-env BABEL_ENV=production webpack --color --config ./webpack.config.prod.js"

webpack.config.dev.js/webpack.config.prod.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      ...更多配置
    }),
}

我个人是直接执行 npm run dev  或者 npm run build 就可根据分析工具的配置进行查看

更多配置

• analyzerMode:'server'，可以是server，static，json，disabled。在server模式下，分析器将启动HTTP服务器来显示软件包报告。在“静态”模式下，会生成带有报告的单个HTML文件。在disabled模式下，你可以使用这个插件来将generateStatsFile设置为true来生成Webpack Stats JSON文件。
• analyzerHost: '127.0.0.1', 将在“服务器”模式下使用的端口启动HTTP服务器。
• analyzerPort: 8888, 端口号。
• reportFilename: 'report.html', 路径捆绑，将在static模式下生成的报告文件。相对于捆绑输出目录。
• defaultSizes: 'parsed'，默认显示在报告中的模块大小匹配方式。应该是stat，parsed或者gzip中的一个。
• openAnalyzer: true：在默认浏览器中自动打开报告。
• generateStatsFile:false: 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成。
• statsFilename: 'stats.json', 相对于捆绑输出目录。
• statsOptions: null，stats.toJson()方法的选项。例如，您可以使用source：false选项排除统计文件中模块的来源。在这里查看更多选项：https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
• logLevel: 'info'，日志级别，可以是info, warn, error, silent。
• excludeAssets:null，用于排除分析一些文件

其他

由于webpack-bundle-analyzer是默认打开一个本地的端口8888来显示结果，而webpack-dev-server是默认打开本地的3000端口，两者的行为是有些类似的。只要在webpack的配置文件中，配置了webpack-bundle-analyzer，那么就会打开8888端口。

所以，对于webpack这件事情来说，

如果执行的命令是webpack，那么，就只会打开webpack-bundle-analyzer的8888。 如何执行的命令是webpack-dev-server的话，那么就会打开两个网页（浏览器），一个是端口3000，一个是端口8888。

另外，额外的补充一下： webpack-dev-server是可以定义用什么浏览器打开的。 截至到发稿， webpack-bundle-analyzer是不能定义使用什么浏览器打开的。作者比较轴，就是不肯添加这么一个选项，而 edge浏览器默认打不开相关视图。