# CI에서 성능 예산 적용 (performance-budget)

> CI에 번들 크기와 Lighthouse 임계값을 두고 예산을 넘으면 실패시켜 PR 단계에서 성능 저하를 잡습니다.

- 카테고리: [성능 최적화](https://www.myskills.tools/ko/categories/performance/)
- 출처: 커뮤니티 · David Dias
- 저장소: https://github.com/thedaviddias/Front-End-Checklist/tree/main/skills/performance-budget (commit 4b0ddb9)
- SKILL.md: https://github.com/thedaviddias/Front-End-Checklist/blob/main/skills/performance-budget/SKILL.md
- 설치 명령: `npx skills add thedaviddias/Front-End-Checklist --skill performance-budget`
- 라이선스: MIT
- 호환 도구: Any SKILL.md agent
- 권한: read-repo ✓, write-files ✓, shell ✓, network ✓
- 상태: 스캔 통과
- 규칙 스캔으로 모든 위험을 찾을 수는 없습니다. 설치 전에 이 스킬의 SKILL.md를 읽고 권한을 확인하세요.

## 핵심 규칙

번들 크기 예산과 런타임 예산(Lighthouse, Core Web Vitals)을 구분하고 둘 다 적용합니다.

## 실행 단계

1. **예산 유무 확인** — package.json과 CI 설정에서 크기나 Lighthouse 임계값을 찾습니다.
2. **임계값 설정** — 최대 번들 크기, 최소 Lighthouse 점수, 최대 LCP를 정하고 느슨하게 시작해 점차 조입니다.
3. **CI에 연결** — size-limit와 Lighthouse CI 단언으로 PR마다 예산을 적용하고, 넘으면 빌드를 실패시킵니다.
4. **배포 후 모니터링** — 운영 환경 RUM과 알림을 연결해 CI 밖에서 생기는 저하도 잡습니다.

## 권한 설명 (SKILL.md 기준)

| 기능 | 필요 여부 | 설명 |
|---|---|---|
| 파일 쓰기 | 필요 | CI 워크플로, package.json, size-limit·Lighthouse CI 설정을 수정합니다. |
| 명령 실행 | 일부 필요 | size-limit, Lighthouse CI 같은 예산 도구를 설치·실행합니다. |
| 네트워크 송신 | 일부 필요 | 개발 의존성 설치에만 사용합니다. |

## SKILL.md 프런트매터(YAML)

```yaml
---
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
---
```

홈: https://www.myskills.tools/ko/ · URL: https://www.myskills.tools/ko/skills/performance-budget/