Chrome DevTools用性能预算约束页面回归的实现方法

页面性能回归最容易漏掉的不是一次明显的崩溃，而是每次改版多了几十 KB 脚本、几个第三方请求，最后用户才感觉变慢。Chrome DevTools 的 Lighthouse 适合先建立同条件基线，再把资源体积和请求数量写进性能预算；真正的自动阻断交给 Lighthouse CI。这样既能定位问题，也能让预算超限在 CI 中明确失败。

官方地址：https://developer.chrome.com/docs/lighthouse/performance/performance-budgets

先用 Lighthouse 建立可比较的性能基线

打开目标页面，按 右键检查 → Lighthouse 进入面板。勾选 Performance，设备选择 Mobile，模式保持 Navigation，再点击 Analyze page load。这一步不要一边改代码一边测，先保留一次基线报告。

报告完成后先看 Metrics 和 Resource summary。前者帮助判断加载与交互变化，后者帮助拆分 document、script、stylesheet、image 和 third-party。性能分数受运行条件影响，预算要绑定稳定的测试命令和页面路径，不能把一次分数直接当作唯一门槛。

把回归边界写入 budget.json

在项目根目录创建 budget.json。下面的数字是示例团队目标，不是 Lighthouse 的官方默认值；第一次接入时应先用基线报告校准，避免把预算设得比当前稳定结果还低。

[
  {
    "path": "/*",
    "resourceSizes": [
      {"resourceType": "total", "budget": 300},
      {"resourceType": "script", "budget": 150},
      {"resourceType": "stylesheet", "budget": 60}
    ],
    "resourceCounts": [
      {"resourceType": "third-party", "budget": 10}
    ]
  }
]

这里的 path 匹配页面路径，resourceSizes 约束传输体积，resourceCounts 约束请求数量；total、script 和 stylesheet 是资源类型。JSON 必须保持有效格式，不能在里面写注释。先从一个全站预算开始，登录页、文章页等差异明显的路径再拆成独立预算对象。

把 budget.json 接入 Lighthouse CI

在项目根目录创建 lighthouserc.cjs，将预算文件接到收集配置，并把预算审计设为错误级别。下面示例只保留与性能预算有关的字段：

module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000/'],
      settings: {
        // 让报告读取项目根目录的预算文件
        budgetPath: './budget.json'
      }
    },
    assert: {
      assertions: {
        // 预算超限时让 CI 以失败状态结束
        'performance-budget': 'error'
      }
    }
  }
};

执行前确保本地服务已经启动，再在项目目录运行：

# 先收集本地页面，再按 budget.json 判断是否超限
npx lhci autorun --config=lighthouserc.cjs

看到 performance-budget 为失败时，先看报告中的资源明细，而不是立即放宽阈值。体积超限通常对应新增脚本、未压缩图片或样式包；请求数超限则要检查第三方分析、广告和字体。修复后重新运行同一命令，只有在变更确实改变了产品边界时才调整预算。

用 DevTools 定位超限来源并固定检查清单

回到 Lighthouse 报告的 Diagnostics，结合 Network 面板的请求类型和大小排序；需要看 JavaScript 组成时打开报告中的 Treemap。每次只改变一个因素，再用同一设备、同一路径和同一收集命令复测。可以按下面的清单判断预算应该落在哪一层：

预算的价值是让“页面变慢了”变成可定位、可讨论的字段。它不替代真实用户数据，也不保证每次 Lighthouse 分数完全相同；它只对约定的本地报告条件提供稳定的回归边界。

常见问题

Chrome DevTools 能直接阻断合并吗？

DevTools Lighthouse 主要用于手动审计和定位。要让超限返回失败，应把 budget.json 接入 Lighthouse CI 或其他 CI 断言流程。

预算数字应该照搬示例吗？

不应该。先跑出稳定基线，再按页面类型留出合理余量；示例中的 300 KB、150 KB 和 10 次请求只是演示字段关系。

为什么同一页面每次分数会变化？

设备、网络模拟、扩展、广告和第三方响应都会影响结果。固定收集条件，并优先观察预算字段与资源明细，不要只盯总分。