피드로 돌아가기
Dev.toFrontend
원문 읽기
Bundle Size 최적화를 통한 TTI 단축 및 런타임 성능 극대화
Tree Shaking and Code Splitting in JavaScript
AI 요약
Context
단일 거대 Bundle 구조로 인한 V8 엔진의 Parsing 및 Compilation 오버헤드 발생. 특히 저사양 디바이스 및 3G 환경에서 TTI(Time to Interactive)가 지연되는 병목 현상 분석.
Technical Solution
- ES Module의 Static Analysis 특성을 활용하여 사용되지 않는 코드를 제거하는 Tree Shaking 적용
- CommonJS의 Dynamic Require 구조로 인한 Tree Shaking 실패 방지를 위해 ESM 표준 채택
- package.json의 sideEffects 설정을 통해 Pure Module임을 명시하여 불필요한 모듈 제거 효율 최적화
- Dynamic import()를 통한 Route-level Code Splitting으로 초기 로드 시 필수 청크만 전송하는 구조 설계
- Rollup manualChunks 설정을 통한 Vendor Library 분리 및 브라우저 캐싱 효율 증대
- Visualizer 도구를 활용한 Module Graph 분석 기반의 의존성 다이어트 수행
실천 포인트
1. rollup-plugin-visualizer로 거대 모듈 및 중복 패키지 식별
2. lodash-es 등 Tree Shaking 지원 라이브러리로 교체
3. 라이브러리 배포 시 package.json에 sideEffects: false 명시
4. React.lazy 및 Dynamic import를 통한 전략적 Code Splitting 적용
5. Lighthouse CI를 통한 LCP, TTI, Total Byte Weight Performance Budget 설정