React打包体积分析问题：GitLab提交时如何追踪bundle文件变化？

我之前帮不少开发者解决过GitLab上追踪React bundle体积的问题，确实danger.js对GitLab的支持不太理想，不过有几个靠谱的替代方案，我给你详细说说：

方案1：GitLab CI + Webpack Bundle Analyzer + 自定义脚本 #

这个方案灵活性最高，适合需要定制化对比逻辑的场景：

• 第一步：配置Webpack生成体积报告
  先装依赖：npm install webpack-bundle-analyzer --save-dev
  然后在你的webpack配置文件里加入这个插件，让它输出JSON格式的统计文件（方便脚本读取）：

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  module.exports = {
    // ...其他配置
    plugins: [
      new BundleAnalyzerPlugin({
        analyzerMode: 'json', // 不生成可视化页面，只输出JSON
        reportFilename: 'bundle-stats.json',
        generateStatsFile: true
      })
    ]
  };
  

• 第二步：写个对比脚本
  你可以用现成的工具比如webpack-bundle-compare，也可以自己写个简单脚本读取两个分支的bundle-stats.json，计算体积变化。比如写个compare-bundle.js，核心逻辑就是解析两个JSON文件，对比主chunk的大小，算出增减百分比。
  如果想把结果自动写到MR评论里，还可以调用GitLab的API，这里给个简单示例：

  const axios = require('axios');
  const fs = require('fs');
  
  async function generateComment() {
    const baseStats = JSON.parse(fs.readFileSync('./base-stats.json', 'utf8'));
    const currentStats = JSON.parse(fs.readFileSync('./bundle-stats.json', 'utf8'));
    const baseSize = baseStats.totalSize;
    const currentSize = currentStats.totalSize;
    const diff = ((currentSize - baseSize) / baseSize * 100).toFixed(2);
    return `Bundle体积变化：${diff > 0 ? '+' : ''}${diff}%（${baseSize} → ${currentSize} bytes）`;
  }
  
  async function addMRComment() {
    const comment = await generateComment();
    await axios.post(
      `${process.env.CI_API_V4_URL}/projects/${process.env.CI_PROJECT_ID}/merge_requests/${process.env.CI_MERGE_REQUEST_IID}/notes`,
      { body: comment },
      { headers: { 'PRIVATE-TOKEN': process.env.GITLAB_TOKEN } }
    );
  }
  
  addMRComment();
  

• 第三步：配置GitLab CI流水线
  在.gitlab-ci.yml里加一个专门的任务，只在MR触发时执行：

  bundle-size-check:
    stage: test
    only:
      - merge_requests
    script:
      - npm install
      # 拉取目标分支的代码并生成体积报告
      - git fetch origin $CI_MERGE_REQUEST_TARGET_BRANCH_NAME:target-branch
      - git checkout target-branch
      - npm run build # 假设你的build命令会生成bundle-stats.json
      - cp bundle-stats.json base-stats.json
      # 切回当前MR的代码，重新生成报告
      - git checkout $CI_COMMIT_SHA
      - npm run build
      # 执行对比脚本并提交评论
      - node compare-bundle.js
    variables:
      GITLAB_TOKEN: $GITLAB_MR_TOKEN # 要在GitLab项目的变量里配置这个token，给它API权限
    cache:
      paths:
        - node_modules/ # 缓存依赖加快速度
  

方案2：用Bundlewatch（开箱即用） #

如果不想自己写脚本，Bundlewatch是个专门做bundle体积追踪的工具，原生支持GitLab，配置起来很简单：

• 先装依赖：npm install bundlewatch --save-dev
• 在项目根目录创建bundlewatch.config.json，指定要监控的文件和体积阈值：

  {
    "files": [
      {
        "path": "./dist/main.*.js", // 匹配你的主bundle文件
        "maxSize": "200kB" // 可选，设置体积上限，超过就触发失败
      }
    ],
    "ci": {
      "trackBranches": ["main"] // 以main分支为基准对比
    }
  }
  

• 然后在GitLab CI里加任务：

  bundlewatch:
    stage: test
    only:
      - merge_requests
    script:
      - npm install
      - npm run build
      - npx bundlewatch
    variables:
      BUNDLEWATCH_GITHUB_TOKEN: $GITLAB_TOKEN # 注意变量名是这个，但填GitLab的token就行
  

  执行后，Bundlewatch会自动在MR里添加评论，显示体积变化，还能在体积超限时让CI任务失败，提醒你优化。

方案3：GitLab CI + Source Map Explorer #

如果你的项目没用到webpack（比如用Create React App默认配置），可以用Source Map Explorer来生成体积报告，后续对比逻辑和方案1类似：

• 装依赖：npm install source-map-explorer --save-dev
• 在package.json加脚本："analyze": "source-map-explorer build/static/js/*.js --json bundle-stats.json"
• 然后在CI里拉取基准分支的报告，用脚本对比后输出到MR评论就行。

一些小Tips #

• 确保CI环境的Node版本和本地一致，不然打包出来的体积可能有差异，影响对比结果
• 缓存node_modules和build目录可以大幅加快CI的执行速度
• 建议只在MR阶段执行体积检查，不用每次push都跑，节省CI资源

内容的提问来源于stack exchange，提问作者Dawid Kwiatoń