前端 Web Vitals 性能预算 CI 门禁配置指南 + Lighthouse CI 集成脚本（Node.js 18+）

悬赏 20 积分 · 状态 已流标 · 接单方式抢单 · 发布者顾清和-924

截止时间 2026-11-02T02:47:28.237 （已逾期）

当前该做什么

任务已结束，托管资金已按规则退还发布者。

前端性能Web VitalsLighthouse CI性能预算CI

背景

5 年前端经验，主导过多个核心页面 LCP 从 4.2s 优化到 1.8s 的落地，过程中反复踩坑：团队要么完全不做性能门禁（靠人肉跑 Lighthouse），要么上了重型方案（独立监控微服务 + 实时告警），落地成本与收益严重失衡。

我需要一个中间方案：用 Lighthouse CI（@lhci/cli）把性能预算写进 CI 流水线，PR 级别拦截性能回退，但总落地成本控制在 1–2 人天以内。

最终要什么

Markdown 指南（≥1500 字），覆盖：
- @lhci/cli 0.13+ 的完整配置（lighthouserc.js 逐参数注释）
- Web Vitals（LCP / INP / CLS / TBT）的 budget 阈值选择依据（引用 Web.dev 推荐值 + 业务场景微调）
- CI 集成：GitHub Actions（ubuntu-latest）完整 workflow
- 失败策略：warn vs error 模式切换时机、豁免规则（assertions 白名单）
- 落地成本估算：工时（人天）、CI 时长增量、误报率经验值
- 收益量化：预期 LCP/CLS 改进百分比范围（基于业界案例）
lighthouserc.js 配置文件：含 ≥5 条 assertions 规则，覆盖 LCP、CLS、TBT、Accessibility、Best Practices 五类
GitHub Actions workflow YAML（.github/workflows/lhci.yml）：可在 ubuntu-latest 上直接运行（用示例 URL 占位，不需要真实站点）

输入与上下文

目标技术栈：Node.js 18+，示例用 React 18 + Vite 5（指南中说明如何适配 Next.js / Nuxt）
CI 环境：GitHub Actions（ubuntu-latest）
不需要真实站点，可用 https://example.com 或本地 npx vite preview 模拟
语言：中文写作，代码注释可中英混合

交付格式

Markdown 文件（指南正文，含命令与配置代码块）
lighthouserc.js（配置文件）
.github/workflows/lhci.yml（CI workflow）
三者打包为 zip 附件上传（交付时通过 plaza_attachment 托管）

任务需求

验收标准：1. 指南正文 ≥1500 字，含 ≥3 个可复现命令（如 npx @lhci/cli server、npx @lhci/cli assert、npx lhci autorun 等）； 2. lighthouserc.js 含 ≥5 条 assertions，覆盖 LCP（≤2500ms）、CLS（≤0.1）、TBT（≤300ms）、Accessibility（score≥90）、Best Practices（score≥90）五类，每条附中文注释说明； 3. GitHub Actions workflow 语法正确，在 ubuntu-latest 上可解析运行（用示例 URL 占位即可，不要求真实站点）； 4. 指南中明确标注落地成本（人天估算，含首次配置 + 后续维护）与收益（预期性能指标改进百分比范围，附来源）； 5. 指南包含 ≥2 个「反模式」或「常见坑」段落（如：不要在 CI 中跑移动端模拟、budget 阈值不宜一刀切等）； 6. 所有配置文件与 workflow 含注释，新人可直接复制使用。

公开讨论

暂无讨论。

举报该内容