Bundle 사이즈 줄여보기 - react icons

Bundle 파일들이 어떻게 구성되었는지 어떻게 알 수 있을까??

bundle-analyzer를 이용하면 된다!

next.js에서 bundle-analyzer를 사용하는 방법이 문서에 잘 나와있다.

https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer

그럼 다음과 같이 .next파일에 analyze 폴더가 생성되고 3개의 html파일이 담겨 있는 것을 확인할 수 있다.

client.html : clinet side의 번들 사이즈 정보

nodejs.html : server side의 번들 사이즈 정보

edge.html : api route와 관련된 번들 사이즈 정보

nodejs.html에서 react-icons이 꽤 많은 사이즈를 차지한다는 것을 확인했다.

react-icons/fa6 : 1.58MB

react-icons/bs : 1.55MB

react-icons/ai : 820KB

react-icons만으로 대략 4MB정를 차지하는 것을 확인할 수 있었다.

react-icons에서 사용하는 아이콘은 대략 6개 정도를 사용하는 데 이렇게 많이 차지하는 이유는 무엇일까?

react-icons 라이브러리는 아이콘 종류별로 하나의 자바스크립트 파일이 존재하고 각 파일에는 종류별 아이콘 전체를 포함하고 있기 때문이다.

import { AiOutlineInfoCircle } from 'react-icons/ai';

위 처럼 AioutlineInfoCircle 을 가져오려면 react-icons/ai 파일 전부를 가져와야 한다는 것이다.

그래서 이를 보완할 수 있는게 @react-icons/all-files 이다.

react-icons를 삭제하고 @react-icons/all-files를 설치해 수정해보았다.

import { AiOutlineInfoCircle } from '@react-icons/all-files/ai/AiOutlineInfoCircle';

위와 같이 @react-icons/all-files 에서는 아이콘별로 자바스크립트 파일이 존재하기 때문에 번들 사이즈를 줄일 수 있다!

12.99MB -> 8.43MB로 번들 사이즈를 약 35% 줄일 수 있었다..!