JS Bundle Size 분석 후 개선

[BoBeenLee]

Description

Webpack Bundle Analyzer로 분석

lodash 번들 최적화

AS-IS Lodash

TO-BE Lodash 제거

• project 페이지에 isEqual부분을 사용하기에 확인이 필요함.
  • main, about 페이지에 lodash가 존재함.
  • isEquals https://www.npmjs.com/package/lodash.isequal 이용하여 사용할 libs만 dep유지
    • 

moment 번들 최적화

• https://github.com/you-dont-need/You-Dont-Need-Momentjs#brief-comparison tree-shaking이 가능한 date-fns으로 통일하기

import dateFnsParse from 'date-fns/parse';
import dateFnsFormat from 'date-fns/format';
import ko from 'date-fns/locale/ko';
import enUS from 'date-fns/locale/en-US';

• 필요한 부분만 임포트하여 tree-shaking 적용
  • Tree shaking issue in 2.17 date-fns/date-fns#2207

react-icons 번들 최적화

• React Icons Imports everything even when included 2 or 3 icons react-icons/react-icons#154 (comment)

AS-IS

TO-BE

• 대략 1mb에서 10kb로 줄일 수 있었음. 꽤나 의미있는 차이

사용하지 않는 이미지 번들링 제거

- 차지하는 사이즈가 크지 않기에 나중에 따로 작업하기

PR 생성시 번들 사이즈 체크 로직 추가 (얼마나 개선되었는지 보기 위함)

• https://github.com/siddharthkp/bundlesize#build-status-for-github

효과

• 개발자 경험으론 빌드 타임을 줄일 수 있음
• 사용자 경험으론 js로드 시간을 줄여 모바일, wifi가 취약한 환경(ex) 3g)에서도 좀더 빠른 로드를 제공해줄 수 있음
  • wifi가 좋은 환경에서는 체감이 힘들 수 있음

Reference

• JavaScript Bundle Diet
  • https://www.youtube.com/watch?v=EP7g5R-7zwM&list=WL&index=11

[BoBeenLee]

lodash 번들 최적화 vs https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_chunk

• 후자에 익숙해지는게 번들 최적화면, lodash 최적화를 고려하지 않아도 되는 부분들이 존재하기에 이점이 있는듯합니다.

[BoBeenLee]

• https://github.com/BoBeenLee/programming-book/blob/master/video/toss/JavaScript%20Bundle%20Diet.md

[BoBeenLee]

lodash 번들링 최적화 부분 중...

you don't need lodash 부분에서 모든 구현체가 없기에 https://www.npmjs.com/package/lodash.isequal 와 같이 사용하는 부분만 최소화하여 dep을 유지하는게 중요한듯 싶다.

[BoBeenLee]

bundle CI - https://web.dev/monitor-and-analyze/