# 서론
nextjs 웹앱을 build하던 도중 react-icons의 번들 사이즈가 500kb를 초과한다는 경고 메세지가 발생했다. 번들사이즈는 로드 속도에 영향을 미칠 수도 있기 때문에 신경쓰여서 해결해보기로 했다.
# Babel 경고 메세지
Nextjs 웹사이트를 build하는 도중 다음과 같음 메세지를 발견했다.
react-icons의 번들 사이즈가 500kB가 넘어간다고 한다. 번들 사이즈가 너무 커서 알려주는 메세지이다.
구글링을 해보니 compact옵션과 관련된 메세지라는 소리가 있어 찾아보았다.
# Compact Option
babel공식문서를 확인해 보았다.
compact옵션의 default 값이 "auto"인데 이 경우, 코드 길이 500_000을 기준으로 true, false를 결정하고 true일 경우, 불필요한 공백 문자, 개행 문자를 지워준다고 한다.
하지만 이 옵션은 그저 최적화를 해주는 옵션일 뿐, 나에게 나타난 경고 메세지와 직접적인 연관성은 찾아볼 수 없었다. (연관이 있을 수도 있겠지만, 나는 찾지 못했다...) 빌드하는 과정에서 최적화를 했음에도 500KB가 넘어가서 나오는 메세지일 뿐인 듯하다.
번들 사이즈를 직접 분석하고자 bundle-analyzer를 설치해 보려한다.
nextjs 공식문서를 가보니 @next/bundle-analyzer라는게 있다.
# @next/bundle-analyzer 설치
내 기억에 react의 경우 creat-react-app을 사용하여 만든 앱은 eject하여 webpack을 건들 경우와 그렇지 않은 경우가 나뉘어서 신중해졌다. react의 경우는 eject를 할 경우, 다시 되돌릴 수 없어서 매우 신중해야 했다.
nextjs는 완전 처음이다보니 혹시 cra와 같은 경우가 있을까봐 다른 블로그도 찾아봤다. 근데 아무래도 이 사람도 공식문서를 보고 작성한 글 같고, 리액트와 같은 이슈는 따로 없는 것 같아서 안심하고 따라하려 한다.
다음은 공식문서에 링크된 github 링크이다.
먼저 package manage를 통해 @next/bundle-analyzer를 설치해주자.
그리고 next.config.js에 다음 내용을 추가하자.
cross-env는 package.json의 scripts를 실행 시킬 때, 환경변수를 세팅할 수 있게 해준다.
아래 명령어를 실행해주자.
📌yarn의 경우는 ANALYZE=true yarn build
명령어를 실행하면 다음과 같은 작업이 자동으로 이루어진다.
1..next폴더에 analyze폴더를 만들고 client.html, nodejs.html, edge.html파일을 생성한다.
2.브라우저에서 방금 생성한 3개의 html파일을 오픈한다.
client.html: client side에서의 정보 표시nodejs.html: server side에서의 정보 표시edge.html: edge API(실험적인 기능들의 API?)정보들을 표시.
3.terminal을 통해 번들 분석 정보를 표시
# react-icons 번들 사이즈 확인
내가 확인하고 싶은 번들에 마우스를 hover하면 3가지 종류의 번들 사이즈가 표시된다. 이에 대해 먼저 간단하게 알아보자.
✔️ Stat Size
웹 브라우저가 앱을 실행하기 위해 다운로드하고 실행해야하는 js 코드의 크기
✔️ Parsed Size
웹 브라우저가 다운로드한 js를 parsing한 뒤의 크기다. 한마디로 js가 실행된 후 웹 브라우저에서 사용하는 메모리의 양을 말한다.
✔️ Gzipped Size
Gzip알고리즘을 사용하여 압축된 js번들 크기를 의미한다.
js파일 하나에 들어있는 react-icons의 크기만 3mb가 넘어간다. 중요한 기능이 있는 것도 아니고 단순히 아이콘인데 선을 넘어도 한참 넘었다.
react-icons의 번들 크기가 엄청 크다는 것을 알았으니 인제 줄여보자.
# react-icons 번들 사이즈 줄이기
콘솔 창에 표시되었던 babel 경고 메세지를 구글링했더니 생각보다 유명한 이슈인지 많은 결과들이 나왔다.
[BABEL] Note: The code generator has deoptimised the styling of [프로젝트 경로]/node_modules\react-icons\fa\index.esm.js as it exceeds the max of 500KB.다음 git issue를 통해 확인해보니
react-icons v4.0이상에서 발생하는 문제 같다.
@react-icons/all-files를 통해 해결 가능하다고 한다.
위의 예제처럼 @react-icons/all-files로 바꿔주었다.
다시 build 후 @react-icons/all-files의 번들 사이즈를 체크해보자.
아까는 js파일 하나에 들어있는 react-icons의 크기만 해도 3mb가 넘어갔는데 @react-icons/all-files의 전체 크기를 따져도 70kb다.
검색 결과의 @react-icons가 포함된 파일들을 봐도 1mb는 커녕 20kb도 넘어가지 않는다.
아까 처럼 js파일을 하나 잡아서 @react-icons/all-files가 차지하는 크기를 보자.
27kb로 3mb가 넘어가던 것과 대조적이다. 나름 성과가 있는 것 같다.
