react 코드 분할 최적화

이동창·2022년 3월 5일

이미지, 폰트 최적화와 마찬가지로, 더 빠른 페이지 로딩을 위해
React.lazy()를 이용한 코드 분할을 적용시켜 보기로 했다.

Before

라우터에 있는 모든 파일을 import 하기 때문에
2.8MB라는 어마어마한 양의 js가 불러와지고 있다.
두 파일 모두 합쳐서 4초 가까이 걸리는 것은 아무리봐도 바람직하지 않음

40% 이상의 사용자들은 로딩이 3초보다 오래 걸리면 기다리지 않고 나간다고 하니
lazy loading을 사용해서, 초기 페이지만큼은 빠르게 로딩할 수 있게 만들어보자

React.lazy()는 보통 라우터 쪽에 세팅하고, 이는 React 공식 문서에서도 권장하는 방법이다.
react-router-dom 공식문서에 어떻게 설정하는지 버전에 따라 자세하게 소개 되어있다.

다만, 페이지마다 필요한 모듈이 다른데 어떤 페이지를 접속하든 초기에 모두 import 하는 것과
모바일 버전과 데스크톱 버전을 한번에 import 하는 등의 문제는 해결할 수 없었다.

이를 위해서는 더 세세하게 나누는 것이 필요해보인다.

먼저 라우터에만 세팅했을 때의 결과이다.

가장 큰 파일의 크기는 400KB 정도 줄었고
다른 파일까지 합치면 대략 500KB 정도의 용량 절약을 할 수 있었다.
속도가 크게 줄진 않았지만 대략 0.7초 정도 줄일 수 있었다.

일단 가장 급한 건 2.56s가 걸리는 저 친구를 줄이는게 성능 향상에 도움이 될 것 같다.
나머지가 content download에 많은 시간이 걸리는 건 아닌데
저 친구만 waterfall의 파란색 부분, 즉 content download에 긴 시간이 걸리기 때문

Reduce unused Javascript는 이제 노란색으로 내려갔다.
여전히 줄일 수 있는 부분이 많지만, 많이 줄어든 것이 보여 기분은 좋다.