JavaScript 번들 크기를 70% 줄이는 방법

대부분의 웹 앱은 너무 많은 코드를 전송합니다. 평균적으로 페이지당 1.7MB의 JavaScript가 로드됩니다. 개발자들은 배포하는 코드 중 단 35%만 실제로 사용합니다.

번들 크기가 작아지면 속도가 향상됩니다. Largest Contentful Paint(LCP)와 Time to Interactive(TTI) 지표를 개선할 수 있습니다.

크기를 줄이기 위해 다음 10단계를 따르세요.

  1. Tree shaking 사용하지 않는 export를 제거합니다. ES Module 문법을 사용하세요. package.json에 "sideEffects": false를 추가하세요. 이를 통해 사용하지 않는 코드의 약 18%를 제거할 수 있습니다.

  2. Code splitting 코드를 더 작은 청크(chunk)로 나눕니다.

  3. Dynamic imports 사용자가 필요할 때만 코드를 로드합니다. 라우트에 lazy loading을 적용하세요. 이를 통해 초기 번들 크기를 28%까지 줄일 수 있습니다.

  4. Image optimization CDN의 URL 기반 변환 기능을 사용하세요. 크기가 큰 인라인 SVG 사용을 중단하세요.

  5. Dependency auditing npx bundle-phobia로 패키지 크기를 확인하세요. • moment.js(67KB) 대신 date-fns(13KB)를 사용하세요. • lodash 대신 lodash-es를 사용하세요. • 간단한 날짜 처리는 dayjs(2KB)를 사용하세요.

  6. Minification 불필요한 공백과 문자를 제거합니다. 대부분의 번들러가 이 작업을 자동으로 수행합니다.

  7. Compression Gzip 대신 Brotli를 사용하세요. Brotli는 파일 크기를 줄이는 데 15%에서 25% 더 효과적입니다.

  8. Dead code elimination 컴퓨터가 절대 도달할 수 없는 코드를 제거합니다.

  9. Lazy loading components 화면 아래쪽(below the fold)에 있는 페이지 요소의 로딩을 지연시킵니다.

  10. Polyfill pruning @babel/preset-env를 사용하세요. 사용자가 실제로 사용하는 브라우저에 필요한 폴리필(polyfill)만 배포하세요.

다음과 같은 실수를 피하세요:

  • 개발용 빌드를 배포하는 것. 항상 NODE_ENV=production을 사용하세요.
  • 라이브러리 전체를 임포트하는 것. 대신 특정 함수만 임포트하세요.
  • 분석을 건너뛰는 것. webpack-bundle-analyzer를 사용하여 큰 청크를 확인하세요.
  • 압축을 잊는 것. 압축되지 않은 파일은 Brotli 파일보다 5배 더 큽니다.

다음 목표치를 통해 진행 상황을 추적하세요:

  • 총 JS 크기: 120 KB 미만.
  • LCP: 2.5초 미만.
  • TTI: 3.5초 미만.

먼저 tree shaking, code splitting, 그리고 auditing에 집중하세요. 이 세 단계만으로도 한 번의 스프린트 내에 50%에서 70%의 크기 감소 효과를 볼 수 있는 경우가 많습니다.

출처: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g