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

대부분의 웹 애플리케이션은 너무 많은 코드를 배포합니다. 평균적인 웹 페이지는 1.7 MB의 JavaScript를 로드합니다. 개발자들은 배포된 코드 중 약 35%만을 실제로 사용합니다.

번들 크기가 작아지면 Core Web Vitals가 개선됩니다. Largest Contentful Paint(LCP)와 Time to Interactive(TTI) 점수가 더 빨라집니다.

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

  • Tree shaking: 사용하지 않는 코드를 제거합니다. 이를 위해 ES Module 구문을 사용하세요.
  • Code splitting: 코드를 더 작은 조각으로 나눕니다.
  • Dynamic imports: 사용자가 필요할 때만 코드를 로드합니다.
  • Image optimization: 대규모 라이브러리 대신 URL 기반 변환을 사용하세요.
  • Dependency auditing: 무거운 라이브러리를 가벼운 것으로 교체하세요.
  • Minification: 코드 파일의 크기를 줄입니다.
  • Compression: Gzip보다 더 나은 결과를 위해 Brotli를 사용하세요.
  • Dead code elimination: 도달할 수 없는 코드 분기를 제거합니다.
  • Lazy loading: 중요하지 않은 컴포넌트의 로드를 지연시킵니다.
  • Polyfill pruning: 사용자가 필요로 하는 폴리필(polyfill)만 배포하세요.

세 가지 기술을 함께 사용하면 가장 효과적입니다. Lazy loading, polyfill pruning, dead code elimination을 조합하면 크기를 15~30% 줄일 수 있습니다.

의존성을 설치하기 전에 먼저 검토하세요. npx bundle-phobia를 사용하여 크기를 확인할 수 있습니다.

예시: • date-fns (13KB)가 moment.js (67KB)보다 좋습니다. • dayjs (2KB)는 날짜 포맷팅을 위한 훌륭한 대안입니다. • 전체 lodash 라이브러리 대신 lodash-es를 사용하세요.

다음 목표치를 통해 진행 상황을 확인하세요: • 전체 JS 크기: 120 KB 미만을 목표로 하세요. • LCP: 2.5s 미만을 목표로 하세요. • TTI: 3.5s 미만을 목표로 하세요.

다음 실수를 피하세요: • 프로덕션 빌드 대신 개발 빌드를 배포하는 것. • 단 하나의 함수만 필요한데 라이브러리 전체를 임포트하는 것. • 서버에서 Brotli 압축 활성화를 잊는 것.

Tree shaking, code splitting, dependency auditing을 사용하면 단 한 번의 스프린트만으로도 페이로드(payload)를 50~70%까지 줄일 수 있습니다.

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