번들 분석

번들 분석(Bundle Analysis)은 번들의 크기와 구성 요소를 시각화해 불필요한 코드와 라이브러리를 제거하는 최적화 방법이에요.

번들이 크면 로딩이 느려지고 성능이 떨어지기 때문에, 번들 분석을 사용해 문제를 찾고 성능을 높일 수 있어요.

사전 준비: 번들 분석 도구 설치

먼저 번들 분석 도구를 설치해 볼게요.

도구를 설치하고 설정을 완료했다면, 실제로 번들을 분석한 결과를 확인할 수 있어요.
분석 결과를 보면, 어떤 모듈이 번들 크기에 많이 기여하고 있는지, 중복되거나 최적화되지 않은 부분이 있는지를 한눈에 파악할 수 있어요.

분석 결과를 바탕으로, 번들 크기를 줄이고 성능을 개선하는 방법을 살펴볼게요.

전체 기능을 다 쓰지 않는 큰 라이브러리는 가벼운 라이브러리로 바꾸세요.

bash

# moment.js → dayjs, date-fns로 교체
npm install dayjs date-fns

# lodash → es-toolkit으로 교체
npm install es-toolkit

중복 설치된 모듈을 제거해 번들 크기를 줄이세요.

bash

# npm 사용 시
npm dedupe

# yarn 사용 시 (Yarn v2 이상)
yarn dedupe

Bundle Phobia에서 패키지 크기를 확인하고 설치를 결정하세요.

부수 효과가 있는 모듈은 트리 셰이킹 대상에서 제외돼요. 순수 모듈만 남겨 번들을 최적화하세요.