증상

프로젝트 개발이 진행됨에 따라 번들 사이즈가 커지고 있는 상황.

해결 방법

https://mystudylab.tistory.com/206 에 나와있는 최적화 방법 중 압축 방법을 적용한다.

압축 방식 비교

1. 애플리케이션 레벨 (예: Node.js/Next.js)

장점:
- 애플리케이션 로직 내에서 세밀한 제어 가능
- 동적 콘텐츠에 대한 즉각적인 압축 가능
단점:
- 애플리케이션 서버의 CPU 리소스 사용
- 각 요청마다 실시간 압축 필요
- 여러 애플리케이션이 있을 경우 각각 설정 필요

2. 웹서버 레벨 (예: Nginx)

장점:
- 중앙 집중식 설정으로 관리 용이
- C로 작성되어 효율적인 압축 처리
- 정적 파일 압축 결과 캐싱 가능
- 여러 애플리케이션에 대해 일관된 압축 정책
단점:
- 동적 콘텐츠 압축은 실시간으로 해야 함
- 세밀한 케이스별 제어가 어려울 수 있음

3. CDN 레벨 (예: Cloudflare)

장점:
- 서버 리소스 사용 없음
- 전세계 엣지 로케이션에서 처리
- 관리 오버헤드 최소화
단점:
- CDN 서비스 비용 발생
- 설정의 유연성이 제한적
- 동적 콘텐츠 처리에 제한

4. 빌드 타임 (예: Webpack)

장점:
- 미리 압축된 파일로 즉시 서빙 가능
- 서버 CPU 부하 없음
- 가장 빠른 응답 가능
단점:
- 빌드 시간 증가
- 동적 콘텐츠 처리 불가
- 디스크 공간 더 필요 (원본 + 압축 파일)

일반적인 권장사항:

정적 파일: Nginx나 CDN 레벨
동적 콘텐츠: Nginx나 애플리케이션 레벨
대규모 서비스: CDN 활용
개발/소규모: Nginx만으로도 충분

nginx 압축 설정 적용

# gzip 압축 활성화
gzip on;

# IE6에서 gzip 비활성화 (오래된 브라우저 호환성)
gzip_disable "msie6";

# 압축 레벨 설정 (1-9, 높을수록 압축률이 높지만 CPU를 더 사용)
gzip_comp_level 5;

# 압축할 파일 타입 확장
gzip_types
    application/javascript
    application/json
    application/xml
    application/x-font-ttf
    font/opentype
    image/svg+xml
    image/x-icon
    text/css
    text/html
    text/javascript
    text/plain
    text/xml;

# 프록시 서버를 위한 설정
gzip_proxied any;

# 최소 압축 크기 (1kb 이상만 압축)
gzip_min_length 1000;

# 압축 버퍼 설정
gzip_buffers 16 8k;

# HTTP 버전 설정
gzip_http_version 1.1;

# Vary 헤더 추가
gzip_vary on;

결과

17M -> 3.4M 약 80% 압축