如何监控 Webpack 构建体积变化？

Top丶爱菊提问于 2026-02-27 08:57:22 阅读 12

优化

最近项目构建后 bundle 体积涨得有点快，想加个监控看看每次构建的大小变化，但不知道怎么搞。试过用 webpack-bundle-analyzer 手动生成报告，但没法自动追踪历史记录。

有没有办法在 CI 里自动记录每次构建的 chunk 大小，甚至设置阈值告警？比如超过 2MB 就报错之类的。

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
      reportFilename: 'report.html'
    })
  ]
};

构建优化构建监控

我来解答赞 11 收藏

反馈

1 条解答

Good“子荧 Lv1

这个需求其实挺常见的，我之前也搞过一套，核心思路是：构建时把体积数据写进文件，CI 里对比历史数据，超阈值就挂掉构建。

先说最简单的方案：用 webpack-bundle-stats 插件，它会生成一个 stats.json 文件，里面包含每个 chunk 的精确体积，比 webpack-bundle-analyzer 更适合自动化。

安装：
npm install --save-dev webpack-bundle-stats

配置里加：

const BundleStatsPlugin = require('webpack-bundle-stats').BundleStatsPlugin;



module.exports = {

  plugins: [

    new BundleStatsPlugin({

      outputPath: 'build-stats.json', // 构建产物目录下

      title: 'Bundle Stats'

    })

  ]

}

构建完会生成 build-stats.json，里面每个 entry 和 chunk 的 gzip 和 brotli 压缩后大小都有，结构大概是：
{ "entries": { "main": { "size": 1234567, "sizeGzip": 456789 } } }

然后 CI 里加个脚本，比如用 Node 写个简单的检查脚本 check-size.js：

const fs = require('fs');

const path = require('path');



const THRESHOLD = 2 * 1024 * 1024; // 2MB

const statsPath = path.join(__dirname, 'build-stats.json');



try {

  const stats = JSON.parse(fs.readFileSync(statsPath, 'utf8'));

  const mainSize = stats.entries?.main?.size || 0;



  if (mainSize > THRESHOLD) {

    console.error([BUILD FAIL] main entry size is ${Math.round(mainSize / 1024)}KB, exceeds ${THRESHOLD / 1024}KB);

    process.exit(1);

  } else {

    console.log( main entry size: ${Math.round(mainSize / 1024)}KB);

  }

} catch (e) {

  console.error('[ERROR] Failed to read build stats:', e.message);

  process.exit(1);

}

CI 里跑完构建再执行 node check-size.js 就行，超了直接退出非 0，构建就挂了。

如果想更进一步，比如存历史趋势，可以把每次的 stats 文件用 Git LFS 存着（适合小项目），或者扔进数据库（比如用 Redis 或 SQLite 存每次构建的时间戳和体积），再配合 Grafana 做个简单面板。不过一般小团队用上面那个阈值判断就足够了，真要查问题直接翻 git 历史看 stats 文件变化也行。

补充一句：别光看 uncompressed size，gzip 后可能差好几倍，建议阈值按 gzip 后的来设，sizeGzip 字段就是干这个的。

另外提醒下，如果用 Webpack 5，记得把 stats 配置成 warnings: false, errors: false，否则 stats 文件会很大，解析变慢。

2026-02-27 09:00