bundle 사이즈 줄이려면?

 

 

 

 

웹 애플리케이션의 번들(bundle) 사이즈를 줄이는 것은

로딩 시간을 단축시키고 사용자 경험을 개선하는 데 중요하다

 

번들 사이즈를 최적화하는 몇 가지 방법은 다음과 같다

 

1. 코드 분할(Code Splitting)

• 동적 임포트(Dynamic Imports)
  • 필요한 순간에만 모듈을 로드하기 위해 동적 임포트(import())를 사용
  • 이 방법은 사용자가 실제로 필요로 하는 코드만 로드하여 초기 로딩 시간을 줄일 수 있음
• 라우트 기반 분할
  • 사용자가 애플리케이션의 특정 부분에 접근할 때만 해당 부분의 코드를 로드하도록 설정함
  • 예를 들어, React에서는 React.lazy와 Suspense를 사용하여 라우트 기반 코드 분할을 구현할 수 있음

2. 트리 쉐이킹(Tree Shaking)

• 사용되지 않는 코드(데드 코드)를 제거하여 번들 사이즈를 줄인다
• 최신 번들러(예: Webpack, Rollup)는 ES6 모듈 시스템을 사용할 때 트리 쉐이킹을 지원한다

3. 라이브러리 최적화

• 라이브러리 사이즈 검토
  • 사용 중인 외부 라이브러리의 사이즈를 확인하고, 더 가벼운 대안이 있는지 고려한다
• 필요한 부분만 임포트하기
  • 전체 라이브러리 대신 필요한 모듈이나 함수만 임포트
  • 예: lodash의 경우, 전체 라이브러리 대신 필요한 함수만 임포트

4. 애셋 최적화

• 이미지 최적화
  • 이미지를 압축하고, 필요한 경우 웹포맷(WebP 등)으로 변환하여 사이즈를 줄인다
• 폰트 최적화
  • 사용하는 폰트의 범위를 최소화하고, 필요한 글리프만 포함시킨다

5. 코드 압축(Minification) 및 난독화(Uglification)

• 코드를 압축하여 불필요한 공백, 주석, 이름을 줄인다
• TerserPlugin 같은 도구를 사용하여 JavaScript 코드드 압축 가능

6. CSS 최적화

• 사용되지 않는 CSS 제거(예: PurgeCSS)와 CSS 압축을 통해 스타일시트의 사이즈를 줄일 수 있다

7. 캐싱 전략 활용

• 변경되지 않는 리소스(예: 라이브러리)에 대해 캐싱 헤더를 적절히 설정하여, 사용자가 동일한 리소스를 반복하여 다운로드하지 않도록 한다

 

번들 사이즈 최적화는 다양한 전략을 조합하여 접근하는 것이 좋다

개발 도구와 환경에 따라 적용할 수 있는 최적화 방법이 달라질 수 있으므로,

프로젝트의 특성에 맞게 적절한 방법을 선택해야 한다