필요성

싱글페이지 어플리케이션의 특성상 번들된 자바스크립트 파일이 모두 불러져와야 웹앱을 브라우저에서 실행할 수 있다.

ux적인 측면에서 최초 렌더링 속도는 매우 중요한 요소이기에 서드파티 라이브러리가 점점 추가됨과 함께 전체적인 앱의 크기가 커짐에 따라 code splitting이 필요하다고 생각되었다.

계획

dynamic import와 react.lazy( ) 함수를 활용하여 라우팅 단위로 chuck들을 쪼갤 것이다.
이에 따라 페이지를 동적으로 불러올 동안 대체할 Suspense의 fallback 컴포넌트도 추가적으로 제작할 생각이다. <div> ...Loading <div>은 이제 그만

과정

결과