【Q112】如何分析前端打包体积

[kangyana]

在 webpack 中，可以使用 webpack-bundle-analyzer (opens new window)分析打包后体积分析。

其原理是根据 webpack 打包后的 Stats (opens new window)数据进行分析，在 webpack compiler 的 done hook (opens new window)进行处理，见源码

compiler.hooks.done.tapAsync("webpack-bundle-analyzer", (stats) => {});

在默认配置下，webpack-bundle-analyzer (opens new window)将会启动服务打开一个各个 chunk 下各个 module 占用体积的可视化图。

你可以通过它，找到在在打包中占用体积最大的模块，并进行优化。

在查看页面中，有三个体积选项：

• stat：每个模块的原始体积
• parsed：每个模块经 webpack 打包处理之后的体积，比如 terser 等做了压缩，便会体现在上边
• gzip：经 gzip 压缩后的体积

1. ANALYZE 环境变量

在实际项目中，往往通过环境变量 ANALYZE 配置该插件，代码如下，可见bundle-analyze/build.js (opens new window)。

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

// 1. BundleAnalyzerPlugin 是如何工作的？
// 2. Stat、Parsed、Gziped 分别是何意义？
// 3. terserplugin 对此结果有影响吗？

function f1() {
  return webpack({
    entry: "./index.js",
    mode: "none",
    plugins: [process.env.ANALYZE && new BundleAnalyzerPlugin()],
  });
}

f1().run((err, stat) => {});

在打包时，通过制定环境变量即可分析打包体积

ANALYZE=true npm run build