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

在 CI 里监控 Webpack 构建体积变化确实是个好主意。最简单的办法是用 webpack-bundle-analyzer 配合 webpack-stats-plugin 来生成 JSON 格式的构建报告，然后对比不同版本的报告。

先安装这两个包：

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

在 Webpack 配置里加上：

const { BundleStatsWebpackPlugin } = require('webpack-stats-plugin');



module.exports = {

  plugins: [

    new BundleStatsWebpackPlugin({

      publicPath: '', // 根据你的项目配置

      filename: 'stats.json'

    })

  ]

}

每次构建后都会生成一个 stats.json 文件。接下来写个简单的 Node 脚本，读取最近两次的构建报告，计算每个 chunk 的大小差异。JS里面可以直接用 fs.readFile 读取 JSON 文件，然后对比 size 字段就行。

如果不想自己写脚本，可以试试现成的工具 size-limit，它能集成到 CI 流程里自动检查 bundle 大小变化并报错。

不过记住，光看体积还不够，还得结合业务逻辑分析到底哪些功能导致了体积膨胀。有时候为了性能优化，牺牲点体积也是值得的。

直接上方案。

最简单的方式是用 webpack 的 --json 输出配合一个对比脚本。webpack 构建时加 --json > stats.json，然后写个脚本解析对比。

我之前用的方案是这样的：

// check-size.js

const fs = require('fs');

const path = require('path');



const stats = JSON.parse(fs.readFileSync('./dist/stats.json', 'utf-8'));



// 从 webpack stats 里提取 assets 大小

const assets = stats.assets

  .filter(a => a.name.endsWith('.js'))

  .map(a => ({ name: a.name, size: a.size }));



// 读取上次记录

const prevPath = path.join(__dirname, 'prev-sizes.json');

const prev = fs.existsSync(prevPath) ? JSON.parse(fs.readFileSync(prevPath, 'utf-8')) : {};



// 对比并输出

let hasChange = false;

console.log('n📦 Bundle Size Reportn');



assets.forEach(asset => {

  const prevSize = prev[asset.name] || 0;

  const diff = asset.size - prevSize;

  const percent = prevSize ? ((diff / prevSize) * 100).toFixed(1) : 0;

  

  if (Math.abs(diff) > 1024) { // 超过 1KB 变化才提示

    const sign = diff > 0 ? '+' : '';

    const emoji = diff > 0 ? '⚠️' : '✅';

    console.log(${emoji} ${asset.name}: ${(asset.size/1024).toFixed(1)}KB (${sign}${percent}%));

    hasChange = true;

  }

  

  prev[asset.name] = asset.size;

});



// 保存当前记录

fs.writeFileSync(prevPath, JSON.stringify(prev, null, 2));



if (hasChange) {

  console.log('n⚠️ Bundle size changed! Check above details.n');

  process.exit(1); // CI 里可以让构建失败

}

然后 package.json 里加个脚本：

{

  "scripts": {

    "build": "webpack --json > dist/stats.json && node scripts/check-size.js"

  }

}

这样每次构建完自动对比上次，CI 里体积涨了会直接报错退出。

如果你想更省事，可以直接用 size-limit 这个工具，配置一下就能自动对比：

npm install --save-dev @size-limit/preset-webpack

// size.config.js

module.exports = [

  {

    name: 'Main',

    path: 'dist/main.js',

    limit: '200 KB'

  }

];

然后 CI 里跑 npx size-limit 就行，超过限制会 exit code 非零。

两种方案看你项目情况选，第一个方案灵活度高，第二个省事。