자바스크립트 압축하기
자바스크립트는 웹 페이지에서 가장 무거운 요소인 경우가 많으며, 페이지가 상호작용하려면 매 킬로바이트를 다운로드, 파싱, 실행해야 합니다. 코드를 압축(Minify)하면 용량을 절반 이상 줄일 수 있습니다. 이 도구는 대부분의 최신 빌드 도구에서 사용하는 압축기인 Terser를 기반으로 하며, 브라우저 환경에서 즉시 공백과 주석을 제거하고 변수명을 단축하며 코드를 안전하게 압축합니다.
주요 기능
- 최신 ES2015+를 지원하는 Terser 엔진.
- 코드 압축: 데드 코드(Dead-code) 제거, 상수 폴딩(Constant folding) 및 구문 단축.
- 지역 변수 이름 난독화(Mangling) (선택 사항).
- 필요시 라이선스 주석 유지.
- 바이트 및 백분율 단위 용량 비교.
- 개인정보 보호: 코드는 브라우저에서 로컬로 처리됩니다.
용량 절감 효과
| 코드 | 예상 절감률 |
|---|---|
| 주석이 많은 애플리케이션 코드 | 50–70% |
| 라이브러리 소스 | 40–60% |
| 이미 간결하게 작성된 코드 | 15–30% |
| 이미 압축된 코드 | 0–5% |
압축된 파일을 gzip이나 Brotli 압축을 적용하여 서비스하면 전송 용량을 60–75% 추가로 줄일 수 있습니다.
팁
- 원본 소스 유지 — 압축된 코드는 읽고 디버깅하기 어렵습니다. 프로덕션 코드의 디버깅을 위해 빌드 시 소스 맵(Source map)을 사용하세요.
- 프로덕션 환경에서는 빌드 단계에서 압축하세요. 이 도구는 일회성 스크립트, 스니펫, 북마클릿 및 번들러가 없는 프로젝트에 사용하기 적합합니다.
- 압축 후 테스트를 진행하세요. 특히 함수 이름이나
eval에 의존하는 코드는 주의가 필요합니다.
관련 도구
CSS 압축기로 스타일시트를 압축하거나, JSON 포매터로 데이터를 보기 좋게 정렬하거나, Base64로 임베딩용 스크립트를 인코딩해 보세요.