번들링 최적화

개념 설명

웹팩 번들 크기를 줄이고 로딩 속도를 향상시키는 번들링 최적화와 트리 셰이킹 기법.

핵심 포인트

• Code Splitting: 경로별, 컴포넌트별 번들 분할로 Lazy Loading 구현
• Tree Shaking: ES Module 정적 구조 활용하여 미사용 코드 제거
• Bundle Analysis: webpack-bundle-analyzer로 번들 구성 분석
• Dynamic Import: import() 함수로 런타임 모듈 로딩
• Vendor Splitting: 라이브러리와 애플리케이션 코드 분리

예시 코드

// Dynamic Import로 Code Splitting
const LazyComponent = React.lazy(() => 
  import('./HeavyComponent')
);