[react-icons] bundle size 줄이기

react-icons

• 리액트 환경에서 브라우저에 다양한 아이콘을 제공하는 대표적인 라이브러리이다.

사용 이슈

• 사내에서 리액트 프로젝트를 담당하고 있었는데 lighthouse 측정 결과 성능이 매우 좋지 않았다.
• 측정 결과 react-icons 라이브러리가 chunk 사이즈의 대부분을 차지하고 있었다.

성능 이슈를 측정하기 위해 개발 환경 구축하기

1) 프로젝트 생성(create-react-app)

npx create-react-app myapp

2) react-icons 라이브러리

npm i react-icons

3) 성능 측정을 위해 라이브러리 추가하기

npm i --save-dev webpack-bundle-analyzer cra-bundle-analyzer

(package.json)

4) react-icons 사용하기

react-icons 사용하기

성능 측정하기

npx cra-bundle-analyzer

번들 사이즈 측정 결과

결과 분석하기

• 아이콘 4개를 사용하기 위해 빌드된 청크 사이즈가 약 4MB.

@react-icons/all-files 로 대체하기

• react-icons는 icon 종류별로 구분되어 있으며, 종류별로 하나의 js 파일에 아이콘 전체를 포함하고 있습니다.
• build 시 해당 파일이 전체가 포함이 되기 때문에 chunk 사이즈가 커지게 됩니다.
• @react-icons/all-files 라이브러리는 아이콘 별로 js 파일을 가지고 있습니다. 따라서 빌드 시 트리 쉐이킹 방식으로 인해 더 적은 크기의 chunk를 만들게 됩니다.

npm remove react-icons
npm i @react-icons/all-files

@react-icons/all-files 대체하기

성능 측정하기

npx cra-bundle-analyzer

@react-icons/all-files 라이브러리 사용 결과

Lighthouse 측정 결과 비교

react-icons

@react-icons/all-files

결과 분석하기

• 청크 사이즈 약 10KB로 개선.
• Lighthouse performance 향상.

정리

• react-icons는 아이콘 그룹별로 구분이 되어있으나 하나의 js 파일에 아이콘들의 정보를 담고 있기 때문에 트리 쉐이킹 방식을 통해 번들 사이즈를 줄이기 어렵다. 예를 들면 아이콘 그룹 fa, md 그룹을 다양하게 구성할수록 chunk 크기는 증가한다.
• 개선하는 방법은 아이콘 단위로 js 파일을 담고 있는 @react-icons/all-files 라이브러리를 사용하여 번들 사이즈를 줄일 수 있다.

참고1) : cra bundle analyze 사용
참고2) : react-icons bundle size issue