https://ko.reactjs.org/docs/code-splitting.html

**React.lazy**

주의

React.lazy와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다.

React.lazy는 동적 import()를 호출하는 함수를 인자로 가집니다.
이 함수는 React 컴포넌트를 포함하며 default export를 가진 모듈로 결정되는 
Promise로 반환해야 합니다.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

**Route-based code splitting**
앱에 코드 분할을 어느 곳에 도입할지 결정하는 것은 조금 까다롭습니다. 
여러분은 사용자의 경험을 해치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다.

이를 시작하기 좋은 장소는 라우트입니다.
 웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 
렌더링하기 때문에 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않습니다.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

**Named Exports**
React.lazy는 현재 default exports만 지원합니다. 
named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성할 수 있습니다. 
이렇게 하면 tree shaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다.