기존에는 앱의 모든 내용을 js파일 하나로 제공하고 있었습니다.
서비스 개발이 진행될수록 파일 사이즈가 늘어나며, 초기에 로딩되는 리소스 양이 증가합니다.
이 문제는 초기에 페이지 로딩 시간이 길어지며, 유저에게 좋지 못한 경험을 제공하게 됩니다.
쉽게 생각하면 앱을 점진적으로 다운로드하는 것으로 생각합니다.
코드 스플리팅을 앱을 분할하고, 원하는 기능에 해당하는 부분의 스크립트만 다운로드하여 사용합니다
그렇기 때문에 모든 앱을 build했던 파일과 비교하면 초기에 로딩되는 리소스 양에서 굉장히 큰 차이가 발생합니다.
필요한 부분만 로딩에 가장 적절한 부분은 아무래도 라우터 별로 제공하는 Page라고 생각합니다.
Search Page에 접근하여 기능을 사용할 때, 다른 라우터에 해당하는 부분의 스크립트를 로드할 필요가 없기 때문입니다.
그렇다면 코드 스플리팅은 어떻게 할 수 있나요?
React의 Lazy를 이용했습니다.
Lazy를 통해 초기 렌더링 될때까지 컴포넌트의 코드 로드를 연기했고, 라우터에 접근했을 때 해당 페이지의 코드를 로드 시킵니다.