taisai-svelte/GZIP_GUIDE.md

Gzip 압축 테스트 가이드

빌드 및 Preview 명령어

1. 빌드 (gzip 파일 생성)

pnpm build

• 원본 파일과 .gz 파일이 함께 생성됩니다
• 1KB 이상의 JS, CSS 파일만 압축됩니다

2. Preview 서버

일반 Preview (gzip 미지원)

pnpm preview

• Vite 기본 preview 서버
• .gz 파일을 제공하지 않음
• 원본 파일만 제공

Gzip Preview (gzip 지원) ⭐

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 명령어

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

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

방법 3: 파일 직접 확인

# .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 옵션 추가 가능