코드 스플리팅을 통한 번들 사이즈 최적화

이슈

• 프로젝트를 빌드하는 도중 아래와 같은 경고문을 발견했다.
• 해석을 해보면 JS파일로 번들링된 청크 중에 500kb를 초과하는 것이 있으니 줄이라는 말이다.

문제점

• 현재는 하나의 JS파일로 번들링 된 결과물로 웹 페이지를 배포하게 되는데, 이렇게 되면 사용자가 웹 페이지에 진입할 때 해당 페이지를 구성하지 않는 모든 페이지에 대한 정보를 불러오게 되고 초기 로딩을 느리게 만들어 사용자 경험을 악화시킨다.
• 실제로 아래와 같이 번들에서 사용하지 않는 부분이 무려 90퍼센트나 되는 것을 볼 수 있다.

번들 사이즈 최적화

• 번들 사이즈 최적화를 위해서는 아래와 같은 작업들을 할 수가 있다.

✅ 여러 파일로 번들링하여 실제로 사용되는 번들만 다운로드 받기 ➡️ 코드스플리팅 등
✅ 번들링 될 자바스크립트 파일 크기를 최대한 줄이기 ➡ 라이브러리 최적화, minify & uglify 등

• 이번 글에서는 코드스플리팅을 통한 번들 최적화를 기록해보고자 한다.
• React.lazy와 Suspense 사용
• vite-bundle-visualzier로 번들 시각화
• 성능 개선을 수치화 하기 위해 개발자도구 네트워크 탭과 Lighthouse를 활용

코드 스플리팅

• 번들 시각화로 번들 파일 중 용량을 많이 차지하는 라이브러리나 컴포넌트를 추적한 결과,
• 게시글을 작성하는 quill과 코드블록을 인식하는 highlight.js등 라이브러리가 많은 비중을 차지하는 것을 확인할 수 있다.
• 사용자가 접근한 페이지에서 필요한 번들만 불러와서 사용될 수 있도록 코드 스플리팅을 통해, 해당 페이지에 접근할 때만 다운 받을 수 있도록 했다.

🔥 Before : 최적화 전

 

🔥 After : 최적화 후

• 모든 JS파일이 하나로 번들링 되었었지만 현재 여러개로 나눠진 것을 볼 수 있다.
• firebase와 Quill 에디터 번들이 상당 부분을 차지하는 모습

• 코드 스플리팅을 했음에도 불구하고 firebase와 Quill 에디터의 번들 크기가 아직 크고, 추가적으로 최적화가 필요함을 알 수 있다.

• 해당 페이지에서 불러온 번들 중 사용되지 않는 부분이 1,820,442 Bytes에서 259,836 Bytes로 감소했다.

코드 스플리팅 결과

측정항목	최적화 전	최적화 후
빌드 소요시간	4.21s	2.91s(31% 감소)
Performance (Lighthouse)	96점	99점
FCP	0.8s	0.5s(37.5% 감소)
LCP	1.3s	0.9s(30.8% 감소)

• 번들 시각화 도구를 통해 최적화할 수 있는 부분을 확인해본 경험이었다.
• 코드 스플리팅을 통해 프론트엔드 애플리케이션의 번들을 작은 조각들로 분할함으로써
  • 각 페이지와 컴포넌트에서 필요한 부분만 불러옴으로써 페이지 로드 성능을 높이고 사용자 경험을 향상시킬 수 있음을 수치로 확인했다.