0. 들어가기에 앞서…
Tree Shaking: JavaScript 번들 최적화
위에 Tree Shaking 개념을 이용해 실제 모노레포 프로젝트에 적용시켜 보았다.
BundleAnalyzerPlugin를 통해 기존 프로젝트를 분석한 결과 불필요한 패키지들이 번들에 포함되는 것을 볼 수 있었다.
1. Before 사이즈 측정
패키지 번들 사이즈 측정
- 패키지 전체의 사이즈: 약 230KB
- 공통 API(homepage-service): 약 60KB
- 공통 컴포넌트(common-ui): 약 105KB
- 공통 Util(common-modules): 약 26KB
- 공통 Hook(common-hooks): 약 38KB
패키지 전체
공통 API
공통 컴포넌트
공통 Util
브라우저 번들 사이즈 측정
공통 Hook
번들의 세부 내용을 보면 모바일 웹에서 사용하지 않는 패키지들도 전부 가져와서 사용하는 걸 확인했다.
모노레포 패키지를 잘못 적용시킨 사례고, 지금이라도 알게 된 점을 다행스럽게 생각하며 성능 최적화를 진행했다.
2. Tree Shaking 적용