# Gzip 압축 테스트 가이드

## 빌드 및 Preview 명령어

### 1. 빌드 (gzip 파일 생성)
```bash
pnpm build
```
- 원본 파일과 `.gz` 파일이 함께 생성됩니다
- 1KB 이상의 JS, CSS 파일만 압축됩니다

### 2. Preview 서버

#### 일반 Preview (gzip 미지원)
```bash
pnpm preview
```
- Vite 기본 preview 서버
- `.gz` 파일을 제공하지 않음
- 원본 파일만 제공

#### Gzip Preview (gzip 지원) ⭐
```bash
pnpm preview:gzip
```
- Express 기반 커스텀 서버
- `.gz` 파일을 우선적으로 제공
- 브라우저가 `Accept-Encoding: gzip`을 보내면 자동으로 `.gz` 파일 제공
- `http://localhost:4173`에서 실행

## Gzip 압축 확인 방법

### 방법 1: 브라우저 개발자 도구 (권장)

1. `pnpm preview:gzip` 실행
2. 브라우저에서 `http://localhost:4173` 접속
3. F12 (개발자 도구) → **Network** 탭
4. 페이지 새로고침 (Ctrl+R 또는 F5)
5. JS/CSS 파일 클릭
6. **Headers** 탭에서 확인:
   - **Response Headers**에 `Content-Encoding: gzip` 있으면 성공 ✅
   - **Size** 열에서 `transferred` vs `resource` 크기 비교

### 방법 2: curl 명령어

```bash
# Windows PowerShell
curl -H "Accept-Encoding: gzip" -I http://localhost:4173/_app/immutable/chunks/ChUbo8MR.js

# 출력에서 "Content-Encoding: gzip" 확인
```

### 방법 3: 파일 직접 확인

```bash
# .svelte-kit/output/client/_app/immutable/chunks 폴더에서
# 원본 파일과 .gz 파일이 함께 존재하는지 확인

dir .svelte-kit\output\client\_app\immutable\chunks\*.gz
```

## 예상 압축률

| 파일 타입 | 원본 크기 | 압축 크기 | 압축률 |
|----------|---------|---------|--------|
| CSS      | 117 KB  | 18 KB   | 84%    |
| JS (Large)| 36 KB  | 12 KB   | 67%    |
| JS (Small)| 3.5 KB | 1.5 KB  | 58%    |

## 주의사항

1. **`pnpm preview`는 gzip을 지원하지 않습니다**
   - 반드시 `pnpm preview:gzip` 사용

2. **프로덕션 배포 시**
   - Nginx, Apache 등 웹 서버에서 gzip 설정 필요
   - Vercel, Netlify 등은 자동으로 처리

3. **이미 압축된 파일은 효과 없음**
   - 이미지(PNG, JPEG), 비디오 파일은 추가 압축 효과 없음

## 설정 파일

### vite.config.ts
- `vite-plugin-compression`: 빌드 시 `.gz` 파일 생성
- `threshold: 1024`: 1KB 이상 파일만 압축

### preview-gzip.js
- Express 기반 커스텀 preview 서버
- `express-static-gzip`으로 `.gz` 파일 우선 제공

## 트러블슈팅

### Q: Network 탭에 `Content-Encoding: gzip`이 없어요
- `pnpm preview` 대신 `pnpm preview:gzip` 사용
- 브라우저 캐시 삭제 후 재시도 (Ctrl+Shift+R)

### Q: 파일 크기가 줄어들지 않아요
- Network 탭에서 **transferred** 크기 확인
- **resource** 크기는 압축 해제 후 크기 (변하지 않음)

### Q: 특정 파일만 압축하고 싶어요
- `vite.config.ts`에서 `filter` 옵션 추가 가능