loadable/components 를 이용한 코드스플리팅

npm i @loadable/component 

npm i --save-dev @types/loadable__component

 

import loadable from '@loadable/component'

 

const Login = loadable(()=>import("@pages/Login"))

const Signup = loadable(()=>import("@pages/Signup"))

 

코드 스플리팅을 하게 되면, 지금 당장 필요한 코드가 아니라면 따로 분리시켜, 나중에 필요할 때 불러와 사용할 수 있습니다. 이를 통하여, 페이지 로딩 속도를 개선 할 수 있습니다.

코드 스플리팅을 하게 되면 spa 의 단점인 초기에 데이터 요청 시간이 길어지는 점을 조금 보완 할수있게된다.

 

출처:hangem-study.readthedocs.io/en/latest/react/code-spliting/