performance-budgetcommit 4b0ddb9SKILL.md · 性能优化

在 CI 中执行性能预算

在 CI 中设定包体积和 Lighthouse 阈值，超出预算即失败，在 PR 阶段发现性能回退。

npx skills add thedaviddias/Front-End-Checklist --skill performance-budget

权限: read-repo
write-files
shell
network
兼容工具: Any SKILL.md agent
GitHub: 74.6k
来源: 社区 · David Dias
状态: 扫描通过
许可证: MIT
分类: 性能优化
代码仓库: github.com/thedaviddias/Front-End-Checklist/skills/performance-budget

核心规则

区分包体积预算和运行时预算（Lighthouse、Core Web Vitals），两者都要执行。

执行阶段

阶段 01检查是否有预算
在 package.json 和 CI 配置中查找体积或 Lighthouse 阈值。
阶段 02设定阈值
明确最大包体积、最低 Lighthouse 分数和最大 LCP，先宽后严逐步收紧。
阶段 03接入 CI
用 size-limit 和 Lighthouse CI 断言在 PR 上执行预算，超出即让构建失败。
阶段 04上线后监控
接入生产环境 RUM 和告警，发现 CI 之外的回退。

权限说明（据 SKILL.md 整理）

能力	是否需要	说明
文件写入	需要	修改 CI 工作流、package.json 及 size-limit、Lighthouse CI 配置。
命令执行	部分需要	安装并运行 size-limit、Lighthouse CI 等预算工具。
网络外发	部分需要	仅用于安装开发依赖。

SKILL.md 头部信息（YAML）commit 4b0ddb9

---
name: performance-budget
description: "Use when reviewing CI configuration, bundle analysis workflows, or pull requests that add dependencies and assets. Distinguish bundle-size budgets from runtime budgets such as Lighthouse or Core Web Vitals so teams can enforce both."
metadata:
  category: testing
  priority: medium
  difficulty: intermediate
  estimatedTime: "25"
  source: frontendchecklist.io
  url: https://frontendchecklist.io/rules/testing/performance-budget
---

核心规则

执行阶段

阶段 01检查是否有预算

阶段 02设定阈值

阶段 03接入 CI

阶段 04上线后监控

权限说明（据 SKILL.md 整理）

SKILL.md 头部信息（YAML）

相关技能