使用 grunt-performance-budget 检测 FCP 超阈值 - 问题详情 - 创脉思

解读

在国内一线/二线前端面试中，性能预算（Performance Budget）是“性能治理”必考题。面试官抛出“用 grunt-performance-budget 检测 FCP 超阈值”并不是让你背 API，而是考察三点：

你是否理解 FCP（First Contentful Paint） 的业务含义与阈值设定逻辑；
你是否能把 Grunt 任务流 与 Lighthouse / Chrome DevTools Protocol 数据打通；
你是否能在 CI 环境 里把性能红线做成 门禁（gate），而不是本地跑个“玩具脚本”。

因此，回答必须体现“指标采集 → 预算校验 → 失败熔断 → 可视化报告”的闭环，并给出可落地的 .budget.json 与 Gruntfile.js 片段。

知识点

FCP 定义：页面首次有“内容”绘制时间点，国内 3G 网络普遍阈值 ≤1.8 s，PWA 或电商大促会卡到 ≤1.2 s。
grunt-performance-budget 原理：底层调用 lighthouse 或 psi（PageSpeed Insights）API，把 JSON 报告拉回本地，再用 budgets 字段做断言。
预算文件格式：.budget.json 支持 resourceSizes 与 timings 双维度；FCP 属于 timings，单位毫秒。
Grunt 任务失败码：grunt.fail.warn() 会返回 exit code 3，可被 Jenkins/GitLab CI 识别为 红色构建。
国内网络加速：若公司机房在阿里云，需给 Lighthouse 加 --chrome-flags="--disable-features=VizDisplayCompositor" 并走 cn-proxy，否则 PSI 请求会超时。
权限与秘钥：PSI API 每日 25 000 次免费额度，必须在 process.env.PSI_KEY 中读取，不可硬编码到仓库，否则安全审计直接挂。
多环境预算：开发、测试、预发三套域名，预算文件用 grunt.template 动态注入，避免“一个阈值走天下”。

答案

安装与版本锁定（国内源）

npm i -D grunt-performance-budget@1.2.0 lighthouse@9.2.0 --registry=https://registry.npmmirror.com

预算文件 .budget.json（FCP ≤1.8 s）

[
  {
    "url": "https://m.example.com/home",
    "timings": [
      {
        "metric": "first-contentful-paint",
        "budget": 1800
      }
    ]
  }
]

Gruntfile.js 关键片段

module.exports = function(grunt) {
  grunt.initConfig({
    performance_budget: {
      default: {
        options: {
          budgets: '.budget.json',
          lighthouse: {
            chromeFlags: ['--headless', '--disable-gpu', '--no-sandbox', '--disable-features=VizDisplayCompositor'],
            throttling: {
              rttMs: 150,
              throughputKbps: 1.6 * 1024
            }
          },
          outputPath: 'reports/lighthouse.json'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-performance-budget');

  // 自定义熔断任务
  grunt.registerTask('perf-gate', function() {
    const report = grunt.file.readJSON('reports/lighthouse.json');
    const fcp = report.audits['first-contentful-paint'].numericValue;
    if (fcp > 1800) {
      grunt.log.error(`FCP ${fcp}ms 超出预算 1800ms`);
      return false; // 令 Grunt exit code = 3
    }
    grunt.log.ok(`FCP ${fcp}ms 通过预算`);
  });

  grunt.registerTask('default', ['performance_budget', 'perf-gate']);
};

CI 集成（GitLab 示例）

test:performance:
  stage: test
  image: node:16-alpine
  script:
    - npm ci
    - npx grunt --env=prod
  allow_failure: false   # 超阈值即阻断合并
  artifacts:
    reports:
      junit: reports/lighthouse.xml

常见坑

字体预加载 导致 FCP 抖动，预算文件里给 options.runs 设为 3 次取中位数；
登录态 页面需要 Cookie，可在 lighthouse.options.extraHeaders 注入 Cookie: session=xxx；
SPA 路由 必须配 lighthouse.options.url 为完整带 # 路径，否则采集的是 404 空白页。

拓展思考

如何把 FCP、LCP、TTFB 同时纳入预算，且 权重化评分？
答：在 budget.json 里给三项分别设阈值，再写 grunt.registerTask('weighted-score', ...) 用 0.5*FCP + 0.3*LCP + 0.2*TTFB 计算总分，低于 90 即熔断，实现 “单指标不超限、总分卡位” 的精细化治理。
如果公司项目 无法翻墙，如何离线跑 Lighthouse？
答：基于 chrome-launcher 本地起 Headless Chrome，把 grunt-performance-budget 的 psi: false 打开，完全走内网；同时把 用户代理字符串 改成 "Mozilla/5.0 (Linux; Android 11; SM-G9730) AppleWebKit/537.36"，可模拟国内主流安卓机型，避免“Mac 顶配机”数据失真。
如何与 埋点平台 打通，做 趋势告警？
答：在 perf-gate 任务里把 FCP 值通过 axios 打到公司自研 Monitor 系统（如基于 Falcon 或夜莺），配置 环比上升 10% 即告警；同时把本次 lighthouse.json 压缩后存 OSS，用 grafana-image-renderer 自动生成 性能趋势图，贴在 Confluence 周报表格，完成 “数据可视化 → 业务方背锅” 的闭环治理。