[ 항해99 실전프로젝트 ] 초기 렌더링 개선

리액트는 SPA로 사용자가 느끼기에 페이지를 넘길 때 마다, 이미 준비된 페이지를 보여주기 때문에 매우 매끄러운 인상을 줄 수 있다. 허나 이것의 단점이라면, 초기에 모든 파일을 하나의 번들로 만들어 로드한다는 것이다.

 

그래서 초기 로드시간을 줄이려면, 한꺼번에 모든 파일을 로드하는 것을 여러 개의 번들로 나누어 주고 쓸모없는 번들 사이즈를 최대한 줄여야 한다.

 

가장 먼저, 구글의 Lighthouse를 통해 최적화를 하기 전 상태를 분석해보자.

 

 

 

그리고 아래는 최적화 하기 전, 번들 파일들을 사이즈별로 정리해놓은 이미지다.

 

아이콘들이 생각보다 엄청난 사이즈를 차지하고 있었다. moment-timezone도 대체해야겠다. 시간만 가져오는 거 치고, 너무 사이즈가 큰데?

 

react-icons를 그래봤자 5-6개 쓴 거 같은데, 왜 이렇게 사이즈가 큰 지 알아보았더니 아이콘의 타입을 임포트하면 그 타입의 모든 파일들을 js파일로 저장한다고 한다. 즉 fa타입에서 star만 써도, fa타입의 모든 아이콘들을 불러와 저장하는 것이다.  그래서 이 필요한 아이콘번들만 들어있게 만들어주자.

 

 

 

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

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

//기존 리액트아이콘을 지우고
yarn remove react-icons

//all-files 라이브러리를 깔아주자.
yarn add @react-icons/all-files

 

그리고,

//이런식으로 import 되있는 파일을
import { BsPencil } from "react-icons/bs";

//이런식으로 바꾸어주자.
import { BsPencil } from "@react-icons/all-files/bs/BsPencil";

 

 

리액트 아이콘만 줄여도, 성능면에서 10점 획득했다.

 

이제 저 TTI부분을 줄여야한다. 저 부분이 실제 사용자가 화면을 켰을 때 느끼는 시간이라고 생각한다.

핀터레스트의 경우, 화면 로드시간을 60프로 줄였더니 유저가 40프로나 증가하였다고 한다