webpack 打包分析

性能优化的主要手段之一即冗余代码优化，减少项目的打包文件体积。在进行具体的代码优化之前，需要先对项目打包文件进行具体的分析，再有针对性的进行优化，可以达到事半功倍的效果。以下推荐一个打包文件体积分析的一个插件：webpack-bundle-analyzer。

安装

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

配置

使用

第一步：在 webpack 的配置文件中引入插件

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

第二步：在 webpack 的配置文件的 plugins 中添加以下代码

new BundleAnalyzerPlugin(),

注意: 此配置需在 HtmlWebpackPlugin 配置之后，否则，在打包的时候会报错，我这里报的为Cannot read property 'tapAsync' of undefined

配置项说明：

new BundleAnalyzerPlugin({
  // 可以是`server`，`static`或`disabled`。
  // 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
  // 在“静态”模式下，会生成带有报告的单个HTML文件。
  // 在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
  analyzerMode: "server",
  // 将在“服务器”模式下使用的主机启动HTTP服务器。
  analyzerHost: "127.0.0.1",
  // 将在“服务器”模式下使用的端口启动HTTP服务器。
  analyzerPort: 8888,
  // 路径捆绑，将在`static`模式下生成的报告文件。
  // 相对于捆绑输出目录。
  reportFilename: "report.html",
  // 模块大小默认显示在报告中。
  // 应该是`stat`，`parsed`或者`gzip`中的一个。
  // start size：原始没有经过 minify 处理的文件大小
  // parse size：比如 webpack plugin 里用了 uglify，就是 minified 以后的文件大小
  // gzip size：被压缩以后的文件大小
  defaultSizes: "parsed",
  // 在默认浏览器中自动打开报告
  openAnalyzer: true,
  // 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
  generateStatsFile: false,
  // 如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
  // 相对于捆绑输出目录。
  statsFilename: "stats.json",
  // stats.toJson（）方法的选项。
  // 例如，您可以使用`source：false`选项排除统计文件中模块的来源。
  // 在这里查看更多选项：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
  statsOptions: null,
  logLevel: "info", // 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
});

第三步：配置打开方式

第一种：构建完成后自动打开

构建完成之后，浏览器会自动打开 localhost:8888,不用改动 package.json

new BundleAnalyzerPlugin({
  analyzerMode: "server",
  analyzerHost: "127.0.0.1",
  analyzerPort: 8888,
  generateStatsFile: true,
  statsOptions: { source: false },
});

第二种：使用命令行方式单独分析

在 webpack 的配置文件的 plugins 中添加以下代码

new BundleAnalyzerPlugin({
  analyzerMode: 'disabled',
  generateStatsFile: true,
  statsOptions: { source: false }
}),

然后在 package.json 的 script 下配置

"bundle-report": "webpack-bundle-analyzer --port 8123 build/stats.json"

其中，stats.json 生成在定义的文件夹下，上述命令会生成在 build 文件夹下；8123 为端口号，可以自定义。

最后，在终端输入 npm run bundle-report ，浏览器就会自动打开分析页面啦

注意：

在运行命令之前，先执行下 npm run build进行打包和生成stats.json
使用命令行单独打开的方式，可以切换 TreeMap Size