Code Splitting 이란?

앱을 개발하고 배포를 하게되면 사용하는 모든 코드들이 하나의 번들로 묶여지게 됩니다.
규모가 크지 않다면 그렇게 문제가 되지 않지만 규모가 커진다면 번들을 로드하는데 시간이 오래 걸리게 됩니다.
이렇게 번들이 커져 로드하는 시간이 커지게 된다면 초기 렌더링 시간이 길어져 사용자에게 좋지 않은 경험을 줄 수 있습니다.
사용자 입장에서 로딩 시간이 길어진다면 사용자 이탈로 이루어질 수 있으므로 매우 중요합니다.

그런데 Code Splitting을 하게 된다면 지금 당장 필요한 코드가 아니라면 따로 분리시켜 나중에 필요할 때 불러와 사용을 할 수 있습니다. 그렇데 된다면 페이지의 로딩 속도 또한 개선이 될 수 있습니다.

React.lazy

React.lazy를 이용하여 Code Splitting을 할 수 있습니다. 앱의 코드 양을 줄이지 않고도 성능을 향상 시킬 수 있습니다.
React.lazy를 사용하는 방법은 아주 간단합니다.
예제를 통해서 보여드리도록 하겠습니다.

import React, { Suspense } from 'react';
import { Route, Switch } from 'react-router-dom';

const Login = React.lazy(() => import ('component/login'))
const Register = React.lazy(() => import ('component/register'))

const App = () => {
  return (
      <Suspense fallback={<div>loading...</div>}>
    	<Switch>
        	<Route component={Login} path={'/login'}/>
        	<Route component={Register} path={'/register'}/>
    	</Switch>
      </Suspense>
  )
}

export default App;

React.lazy를 사용하면 동적으로 컴포넌트를 가져올 수 있습니다.
또한 Suspense를 이용을 하면 해당 컴포넌트를 가져오기 전 까지 fallback 파라미터를 사용해서 Loading 화면을 동적으로 가져올 때 까지 보여줄 수 있습니다.