React 프로젝트의 번들 사이즈를 줄이는 방법

React 기반 프로덕트를 개발하면서 성능에 대해서는 많이 신경쓰지 못했지만, 어느 순간부터 로딩타임이 긴것 같다는 느낌이 들었다.

그래서 chrome network 탭을 확인해보니  현재 네트워크 탭에 찍히는 main.js는 5mb가 넘었다.

 

번들링 사이즈가 꽤 큰 것 같아서 이 부분에 대한 수정을 진행했다.

 

기존 번들 사이즈 (번들 사이즈에 대한 설명)

stat: 4.41 mb | 최적화되기 전 코드의 번들 사이즈.
parsed: 1.96mb | minimize된 파일 사이즈다. 브라우저에서 파싱된 자바스크립트 코드의 사이즈.
gzip: 527kb | minimize와 gzip을 거친 후의 사이즈. 네트워크에서 로드될 때의 사이즈.

 

1. BundleAnalyzerPlugin 를 이용한 번들파일 분석

처음으로는 우선 main.js가 왜 이렇게 큰지를 확인해봐야 한다. 그래서 BundleAnalyzerPlugin 을 통해 Build시 각 패키지가 차지하는 사이즈를 확인해 봤다. webpack plugin 추가 만으로 bundle 사이즈를 확인할 수 있었다.

처음 main.js의 stat 사이즈는 3.41mb.. parsed는 1.96mb, gzipped는 527kb 이다.

react-icons가 가장 크다.. 그다음은 moment.js와 react-dom 그리고 swiper...수정이 필요해 보입니다...

 

-> react-icons 제거

icon은 2곳에서 사용중인데, 1.15MB를 차지하고있다. 일반 svg파일로 충분히 변경 가능한 상태입니다.

이후 코드 수정을 진행했고, react-icons를 사용하지 않으니 아래와 같이 3.41mb에서 2.3mb로 main.js의 stat 사이즈가 33% 감소하였습니다.

 

 

2. loader-specific 옵션

코드를 줄이는 두번째 방법은 loader-specific 옵션을 사용하는 것이다. loader 이 옵션을 사용하면, minifier가 줄이지 못하는 코드를 줄여줄 수 있다.

{ loader: 'css-loader', options: { minimize: true } },

해당 설정 후 2.3MB에서 2.28MB로 약 1% 사이즈가 줄었다.

 

 

3. 이미지 사이즈

기존 file-loader로 png, svg를 번들링 했는데 url-loader와 svg-url-loader로 변경해보았다.

2.28mb에서 2.31mb로 오히려 올랐다..

그래서 image-webpack-loader를 사용해 보았다.

전과 후.. Gzipped size가 0.01KB 줄었다..ㅎ?

이 부분을 통한 큰 변화는 없는것으로 보여서 다시 원래대로 돌렸습니다.

 

 

---

여기까지 수정한 결과

기존 main.js의 stat 3.41mb.. parsed는 1.96mb, gzipped는 527kb 에서,

stat은 2.3mb, parsed는 945.72KB, gzipped 사이즈는 252.6KB로 줄었음을 알 수 있다.

moment가 672KB를 차지하고 있는 만큼 이후 해당 라이브러리를 dayjs로 교체하면 번들 사이즈를 더 작게 만들 수 있을것으로 보입니다.

 

 

 

4. (추가 ) moment.js 걷어내고 dayjs 사용하기

react-icons를 제거하고 나니 moment.js가 번들의 가장 큰 용량을 차지하고 있습니다.

Day.js란 "Moment.js와 호환되는 API를 가진 경량 라이브러리"로 Day.js의 용량은 7.1KB(gzipped: 2.9KB)이기 때문에 moment.js보다 약 33배 더 가볍다고 합니다.

moment 대신 dayjs를 사용해 코드를 수정한 결과는 아래와 같다

여기까지 수정한 결과

기존 main.js의 stat 3.41mb.. parsed는 1.96mb, gzipped는 527kb 에서,

stat은 1.26mb, parsed는 559.81KB, gzipped 사이즈는 153.67KB로 줄었음을 알 수 있었습니다.

 

 

 

 

github project : https://github.com/karrotmvp/meetup-client