Return

Bundle Optimization

PERFORMANCE •

Situation

cesium 라이브러리 추가 후, First Load JS 의 크기가 비정상적으로 커진 것을 확인. 빌드 결과에서, 모든 페이지가 2MB 가 넘는 JS 번들을 필요로 하고 있었음. Vercel Speed Insights 대시보드에서 FCP (First COntentful Paint) 가 10초를 넘어가는 최대치를 기록함.

Task

  • 성능 저하의 주 원인을 판별하고 이를 개선.

Action

1. Measured bundle sizes with @next/bundle-analyzer

  • 각 경로에 따라 요구되는 JS 번들의 크기 측정
  • Bundle analysis 를 진행할 수 있는 빌드 스크립트 추가 설정

2. Researched about module bundling process

  • 모듈 번들링이 어떻게 진행되는지 파악
  • 놓치고 있었던 barrel exports 의 부작용 발견
  • 하나의 index 파일에서 모든 컴포넌트를 export 하던 UI 패키지의 barrel exports 수정

3. Lazy loaded heavy dependencies (Cesium, Three.js)

  • 각 경로에 영향을 미치는 모듈의 boundary 파악
  • 어떤 모듈을 lazy loading 으로 분리할 지 선별하여 적용
  • 용량이 큰 모듈을 사용하는 컴포넌트들을 lazy import 로 감싸는 작업 실행

4. Applied lightweight library variants

  • Lightweight variants 를 사용해 react-syntax-highlighter 라이브러리에서 지원하는 문법 highlight 대상 언어를 제한함

Results

Barrel exports 와 외부 라이브러리의 무분별한 사용이 성능 저하의 주요 원인이었음. 홈페이지의 번들 크기를 2.55 MB 에서 853 KB 로 약 66% 감소. FCP 가 평균 약 1.2 초로 안정됨. @juun-roh/cesium-utils 패키지에서 modular export 전략을 세우는 것에 영향을 미침.