前端性能预算与自动化守门（Performance Budget、Lighthouse CI、阈值）

前端性能预算与自动化守门（Performance Budget、Lighthouse CI、阈值）概述性能预算将关键指标量化并纳入发布门禁，避免回归。CI 自动化可持续保障体验质量。关键实践与参数预算项：JS/CSS/图片体积、请求数、LCP/INP/TBT/CLS 指标阈值。CI 守门：Lighthouse CI 分数与核心指标不低于设定阈值；超限阻断。构建分析：使用 bundle 可视化与按路由拆分，优化长尾资源。示例（Lighthouse CI 配置片段）{ "ci": { "assert": { "budgets": [ { "path": "./budgets.json" } ], "assertions": { "categories:performance": ["warn", { "minScore": 0.9 }], "metrics:lcp": ["error", { "maxNumericValue": 2500 }] } } } } 验证方法在 PR 与主干触发 CI，比较分数与指标变化，阻断不达标提交。观察构建体积与路由分布，定位异常增长与依赖膨胀。RUM 校验真实用户端的指标是否与实验室数据一致。注意事项指标阈值需随业务与设备结构调整；避免过严导致交付阻塞。性能预算与监控闭环；发布后持续跟踪并回馈优化。对灰度与金丝雀流量单独评估，避免统计偏差。