사이드 프로젝트 14편 | LCP 성능 최적화 -2 (bundle size 줄이기, react-icons, cra-bundle-analyzer )

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다.

 

---

 

 

지난 편에 이어서 LCP 최적화를 진행해 보도록 하겠습니다.

 

LCP 개선하기 - Reduce unused JavaScript
번들사이즈 줄이기

 

LightHouse -  Reduce unused JavaScript  조언은 웹페이지나 앱이 로드될 때 필요하지 않은 JavaScript 코드가 있을 경우 해당 코드를 최적화하여 성능을 향상하라는 의미입니다. 웹 페이지나 앱에서 사용되지 않은 JavaScript 코드가 많을 수록 페이지 로딩 시간이 늘어나고 사용자 경험이 저하될 수 있습니다. 따라서 사용되지 않은 JavaScript 코드를 식별하고 제거함으로써  페이지 로딩시간을 단축하고 사용자가 더 나은 경험을 할 수 있습니다.

 

 

먼저 제 프로젝트의 해당 항목의 분석 결과를 살펴봅시다.

 

LigtHouse 측정 결과 해당 항목의 성능이 매우 좋지 않습니다.

분석 결과, 사용되지 않은 react-icons 라이브러리가 상당히 큰 부분을 차지하고 있음을 확인했습니다. 그러면 실제로 얼마나 큰 비중을 차지하고 있는지 확인해 보도록 하겠습니다.

 

 

cra-bundle-analyzer

cra-bundle-analyzer는 Create React App (CRA) 프로젝트의 번들 크기를 시각화하는 도구입니다. 프로젝트의 번들 구성을 분석하고 각 모듈의 크기 의존성을 시각적으로 파악하여 프로젝트에서 큰 번들 크기를 가진 모듈을 식별하고 최적화할 수 있습니다. 이는 webpack 설정을 직접 수정해야 하는 번거로움을 줄이기 위해 개발된 도구로, CRA 프로젝트에서 eject 없이도 번들 사이즈를 간편하게 분석할 수 있게 도와줍니다.

 

 

사용방법

1. 성능 측정을 위해 라이브러리 설치하기

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

 

2. 성능 측정하기

npx cra-bundle-analyzer

 

 

번들 사이즈 측정 결과

결과 분석하기

• Stat size : 10.72MB (위 사진에 흐릿하지만 해당 수치가 나와있습니다)
• index.tsx와 약 138개의 모듈로 구성된 하나의 번들파일이 크기가 매우 큰 것으로 보인다. react-icons 라이브러리가 chunk 사이즈의 대부분을 차지하고 있는 것으로 보인다.
  
  • 다른 블로그에서는 node_modules/react-icons 로 따로 분리된 파일이 나오던데 왜 하나의 파일로 나오는지 모르겠다.

 

@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 를 사용했던 부분들을 전부 @react-icons/all-files로 대체하겠습니다.

RecipeDetail컴포넌트 @react-icons/all-files로 대체하기

 

 

성능 측정하기

npx cra-bundle-anlyzer

 

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

 

Lighthouse 측정 결과 비교하기

 

결과 분석하기

• Stat size : 1.23MB  (10.72MB → 1.23MB) 90%감축
•  Lighhouse performance 향상 (70점 → 91점) 

 

정리

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

 

 

 

 

reference

참고 1)  cra bundle analyze 사용

참고 2) https://eratosthenes.tistory.com/2