1. React-icons bundle 문제
- lightHose를 통해서 현재 웹페이지의 성능점수를 확인
- 트리맵을 통해 어디서 성능 issue가 발생했는지 확인
측정 결과 react-icons 라이브러리가 chunk 사이즈의 대부분을 차지하고있는 것을 확인
2. 페이지 진입 시 발생하는 버들파일 issue
- 맨처음 페이지에 진입하면 웹팩에서 압축한 번들파일을 다운받게됨.
- 맨처음 로딩할 때, 페이지의 전체 리소스를 다운.
- 이렇게 되면 초기에 굳이 로딩할 필요 없는 리소스 까지 다운받게 되면서 bundle issue 발생
해결방안
1. React-icons/all-files 로 대체하기
- react-icons는 icon 종류별로 구분되어 있으며, 종류별로 하나의 js 파일에 아이콘 전체를 포함
- build 시 해당 파일이 전체가 포함이 되기 때문에 chunk 사이즈가 커지는 문제
- @react-icons/all-files 라이브러리는 아이콘 별로 js 파일을 가지고 있음.
- 따라서 빌드 시, 트리 쉐이킹 방식으로 인해 더 적은 크기의 chunk를 만들 수 있음.
2. Code-splitting 하기
- 불필요한 코드, 중복되는 코드 없이 적절한 사이즈의 코드가 적절한 타이밍에 적절한 로딩시간으로 로드하도록 하는것
- 지연로딩(lazy-loading)을 이용해서 보이는 페이지만 로드 한 후 다른 페이지 접속했을 때 그곳의 데이터를 로드해오도록 변경
- 모든 페이지들을 받아서 Bundle.js 만들고 렌더링 하는 것이 아닌, 사용하려는 페이지 별로 Bundle을 생성해서 렌더링이 일어날 수 있도록 변경.
- 초기에 한번에 받은 리소스가 줄어듬으로 써 초기 렌더링 속도 개선