Lighthouse CI 可通过 GitHub Actions 实现自动化性能审计与防退化拦截，配合 LHCI Server 建立趋势看板，并结合 RUM 数据闭环验证真实用户体验。
直接用 Lighthouse CLI 配合 CI/CD 工具（如 GitHub Actions）就能实现，不需要自己调用底层 Chrome DevTools Protocol。核心是把“审计动作”变成构建流程中的一个可验证、可拦截的步骤，而不是仅生成报告。
配置 Lighthouse CI 工具链
Lighthouse CI 是专为持续集成设计的封装工具，比裸用 Lighthouse CLI 更稳定、更适合团队协作：
- 全局安装：
npm install -g @lhci/cli@0.15.x（推荐锁定小版本，避免意外行为变更） - 项目根目录创建
.lighthouserc.js，定义采集方式与断言规则 - 关键配置项包括：
collect（运行次数、URL 列表、预设环境）、assert（指标阈值）、upload（结果存储位置）
在 CI 中自动触发并拦截退化
以 GitHub Actions 为例，在 .github/workflows/perf.yml 中加入 Lighthouse 步骤：
- 确保构建产物已生成（如
npm run build后服务静态文件） - 用
lhci collect启动本地服务器并采集多轮数据（默认 3 次） - 用
lhci assert校验核心指标：例如"largest-contentful-paint": ["error", {"maxNumericValue": 2500}]表示超过 2.5 秒就让 CI 失败 - 失败时会输出具体哪项不达标，便于开发快速定位
设置性能基线与趋势看板
单次断言只能防退化，长期优化需要历史对比：
- 启用
lhci upload，将结果推送到 LHCI Server 或临时存储（如temporary-public-storage） - LHCI Server 提供 Web 仪表盘，展示 FCP、LCP、CLS 等指标随提交的变化曲线
- 可在 PR 中自动评论性能变化摘要（需配置 GitHub App 或使用
lhci github-pr-comment） - 建议为每个主干分支（如
main）维护独立基线，避免不同环境数据混杂
补充真实用户数据形成闭环
Lighthouse 是实验室数据，必须结合 RUM 才算全生命周期：
- 在生产环境注入
web-vitals库，监听并上报onLCP、onCLS、onINP - 用
navigator.sendBeacon确保卸载前可靠发送，避免丢失关键指标 - 将 RUM 数据与 Lighthouse 历史趋势并列分析：比如 Lighthouse 显示 LCP 稳定在 1.8s，但 RUM 中 75 分位达 4.2s，说明网络或设备差异未被覆盖
- 这种差异就是后续优化优先级的依据——先解决影响真实用户的瓶颈
