---
name: verify-perf
description: |
  Nuxt 프로젝트의 성능 병목을 분석하고 Core Web Vitals 기준으로
  코드 스플리팅, 이미지 최적화, SSR/ISR 전략 등 구체적인 개선 방안을 제시합니다.

  다음 상황에서 반드시 사용하세요:
  - "성능 최적화해줘", "Lighthouse 점수 올려줘"
  - "LCP가 느린데 어떻게 해?", "번들 사이즈 줄여줘"
  - Core Web Vitals 기준 미달 시 개선 방향이 필요할 때
---

# 성능 최적화 분석 (verify-perf)

Nuxt 프로젝트 → 성능 병목 자동 분석 → Core Web Vitals 개선 가이드 생성.

## 언제 사용하는가

- 배포 전 성능 기준(LCP < 2.5s / CLS < 0.1 / INP < 200ms) 충족 여부 확인 시
- Lighthouse 점수 80+ 달성을 위한 구체적 액션이 필요할 때
- 번들 사이즈 증가, 이미지 로딩 지연 등 특정 성능 문제가 있을 때

## Core Web Vitals 목표

| 지표 | 목표 | 기준 |
|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | 가장 큰 콘텐츠 렌더링 |
| CLS (Cumulative Layout Shift) | < 0.1 | 레이아웃 안정성 |
| INP (Interaction to Next Paint) | < 200ms | 입력 반응성 |
| FCP (First Contentful Paint) | < 1.8s | 첫 콘텐츠 노출 |

---

## 작업 순서

### Phase 1: 코드 분석

1. 아래 파일을 읽어 성능 관련 설정을 파악한다.
   - `nuxt.config.ts`: 이미지 모듈, SSR 설정, 번들러 옵션
   - `pages/` 및 `components/`: 이미지 태그, 폰트 로딩, 라이브러리 import
   - `package.json`: 번들 크기 영향이 큰 패키지 확인

2. 일반적인 병목 패턴을 체크한다.

   **번들 크기**
   - `import * from '...'` (tree-shaking 비활성화)
   - 전체 import 라이브러리 (lodash, moment 등)
   - 대형 아이콘 라이브러리 전체 import

   **이미지**
   - `<img>` 직접 사용 (Nuxt `<NuxtImg>` 미사용)
   - `width`, `height` 미지정 (CLS 발생)
   - 레이지 로딩 미적용

   **렌더링 전략**
   - 정적 콘텐츠에 `useFetch` 남용
   - 불필요한 CSR 컴포넌트

### Phase 2: 개선 방안 생성

#### 이미지 최적화
```vue
<!-- Before -->
<img src="/hero.jpg" alt="히어로" />

<!-- After: Nuxt Image 모듈 활용 -->
<NuxtImg
  src="/hero.jpg"
  alt="히어로"
  width="1200"
  height="600"
  loading="lazy"
  format="webp"
/>
```

#### 번들 최적화
```ts
// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['vue', 'pinia'],
          }
        }
      }
    }
  }
})
```

#### SSR / SSG / ISR 전략
```ts
// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },          // 정적 홈
    '/products/**': { swr: 3600 },     // ISR: 1시간 캐시
    '/dashboard/**': { ssr: false },   // CSR: 인증 필요 페이지
  }
})
```

#### 컴포넌트 지연 로딩
```vue
<!-- 무거운 컴포넌트 lazy 로딩 -->
<LazyHeavyChart v-if="isVisible" />
```

### Phase 3: 우선순위 정렬

발견된 개선사항을 impact/effort 매트릭스로 정렬한다:
- 🔴 High impact, Low effort → 즉시 적용
- 🟡 High impact, High effort → 스프린트 계획
- 🟢 Low impact, Low effort → 여유 있을 때
- ⚪ Low impact, High effort → 보류

---

## 출력 형식

```
## 성능 분석 리포트

### 현황 추정
- 예상 LCP: ~ (분석된 병목 기준)
- 주요 이슈: [번들 사이즈 | 이미지 | 렌더링 전략]

### 🔴 즉시 적용 (High impact, Low effort)
1. [문제] → [해결책 + 코드]

### 🟡 스프린트 계획 (High impact, High effort)
1. [문제] → [해결 방향]

### 예상 개선 효과
- LCP: Xs → Xs
- 번들: XkB → XkB (XX% 감소)
```