Route Based Splitting

라우팅 경로에 따른 코드 스플리팅

라우팅 경로 기반 코드 스플리팅을 사용하면 특정 경로에서만 필요한 리소스를 로드하여 사용하도록 할 수 있다. React 의 Suspense 혹은 loadable-components 와 react-router를 함께 사용하여 현재 라우팅 경로에 해당하는 컴포넌트를 동적으로 로드할 수 있다.

라우트 경로 별로 컴포넌트 지연 로딩을 적용하여 현재 라우팅 경로에서 필요한 번들만 다운로드받도록 구현했다. 대부분의 사용자는 리디렉션 중에는 로딩이 있다는 것에 익숙하기 때문에 이 때가 컴포넌트를 지연로딩시키기에 최적의 타이밍이 된다.