105 lines
2.9 KiB
Markdown
105 lines
2.9 KiB
Markdown
# 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` 옵션 추가 가능
|
|
|