JavaScript 번들 크기 70% 줄이는 10단계
출처: Dev.to
대부분의 자바스크립트 애플리케이션은 필요하지 않은 코드를 많이 포함하고 있습니다. 평균 웹 페이지는 1.7 MB의 자바스크립트를 로드하지만(HTTP Archive, 2025), 개발자는 배포한 코드의 약 35%만 사용합니다. 번들 크기를 줄이면 핵심 웹 성능 지표(특히 최대 콘텐츠 페인트(LCP)와 인터랙티브까지 걸리는 시간(TTI))가 직접 향상됩니다.
다음은 영향력 순으로 정렬된 10가지 실행 가능한 기술이 포함된 데이터 기반 가이드입니다.
| 기술 | 평균 감소 | 노력 | 위험 수준 |
|---|---|---|---|
| Tree shaking | 15-25% | Low | Low |
| Code splitting | 20-35% | Medium | Low |
| Dynamic imports | 10-20% | Low | Low |
| Image optimization (via code) | 5-15% | Low | Low |
| Dependency auditing | 10-30% | Medium | Medium |
| Minification | 5-10% | Low (built-in) | Low |
| Compression (Brotli/Gzip) | 60-80% of output | Low | Low |
| Dead code elimination | 5-15% | Medium | Low |
| Lazy loading components | 8-18% | Low | Low |
| Polyfill pruning | 3-12% | Medium | Medium |
Tree shaking은 번들 출력에서 사용되지 않는 내보내기를 제거합니다. 전체 코드베이스에 ES 모듈 구문(import/export)이 필요합니다.
{
"sideEffects": false
}이 단일 줄은 모든 모듈이 부수 효과가 없음을 바벨러에게 알리며, 공격적인 사용되지 않는 코드 제거를 가능하게 합니다. 평균적으로 프로젝트에서 약 18%의 사용되지 않는 코드를 제거합니다.
사용자가 특정 라우트로 이동할 때만 자바스크립트를 로드하도록 하세요:
// 정적 임포트 대신:
import Dashboard from './pages/Dashboard';
// 동적 임포트 사용:
const Dashboard = lazy(() => import('./pages/Dashboard'));이 방법으로 테스트 React 앱(12개 라우트)에서 초기 번들 크기가 28% 감소했으며, LCP가 4.2s에서 2.8s로 단축되었습니다.
npx bundle-phobia 200건 이상의 프로젝트를 감사함에 따른 주요 결과:
- date-fns (13KB tree-shaken) vs moment.js (67KB minified)
- lodash-es (개별 임포트) vs lodash (전체 라이브러리 71KB)
- dayjs (2KB) – 90%의 날짜 포맷팅 사용 사례 커버
단일 큰 의존성을 교체하면 gzipped JavaScript에서 50~150KB를 절감할 수 있습니다.
Brotli는 일반적으로 Gzip보다 자바스크립트 파일에 대해 15~25% 더 효율적인 압축을 제공합니다:
| 압축 | 출력 크기 | 원본 대비 비율 |
|---|---|---|
| None | 500 KB | 100% |
| Gzip (level 6) | 145 KB | 29% |
| Brotli (level 4) | 122 KB | 24% |
| Brotli (level 6) | 118 KB | 24% |
대부분의 CDN과 호스팅 플랫폼은 기본적으로 Brotli를 지원하므로 활성화만 확인하면 됩니다.
이 세 가지 기술은 서로 보완됩니다. Lazy loading은 화면 아래에 있는 비필수 JavaScript을 지연시킵니다. @babel/preset-env와 useBuiltIns: ‘usage’ 옵션을 사용해 polyfill 프룬닝을 진행하면 실제 사용 중인 브라우저만 폴리필을 배포할 수 있습니다. Dead code elimination은 도달 가능한 if 분支와 사용되지 않는 유틸리티 함수를 찾아냅니다.
세 단계만 적용해도 일반적으로 번들 크기를 15~30% 감소시킵니다.
Replace inline SVGs and large image-processing libraries with URL-based transforms from your image CDN. Enable production minification (most bundlers do this by default). Ensure server-level compression is active – a 500KB uncompressed file becomes 118KB with Brotli.다음 지표를 최적화 전·후로 추적하세요:
| 지표 | 이전 | 목표 | 도구 |
|---|---|---|---|
| 총 JavaScript 크기 (gzip) | 350 KB | < 120 KB | Bundle Analyzer |
| LCP | 4.0s | < 2.5s | Lighthouse |
| TTI | 5.5s | < 3.5s | WebPageTest |
| 요청 수 | 45 | < 20 | Network tab |
각 최적화 라운드 후 npx lighthouse --view를 실행하세요. 한 번에 5~10%씩 점진적으로 개선하고, 모든 것을 한 번에 수정하려고 하지 마세요.
개발 빌드는 항상 NODE_ENV=production 로 설정된 프로덕션 빌드를 배포하세요.
전체 라이브러리를 임포트하는 대신 import debounce from 'lodash-es/debounce'를 사용하고 import _ from 'lodash' 대신 사용하지 않도록 하세요.
소스.map 분석을 건너뛰지 마세요 – webpack-bundle-analyzer 또는 vite-plugin-visualizer로 큰 청크 식별하기.
압축을 건너뛰면 압축되지 않은 JavaScript가 Brotli 압축된 버전보다 4~5배 더 큽니다.
트리 섀킹, 코드 스플리팅, 의존성 감사를 적용한 개발자는 단일 스프린트 내에서 JavaScript 페이로드의 50~70%를 절감할 수 있습니다. 나머지 7가지 기술은 점진적인이지만 여전히 의미 있는 반환을 제공합니다.