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

cra나 nextjs를 사용한다면 기본적으로 코드 스플리팅 설정이 되어있고

import("./math").then(math => {
  console.log(math.add(16, 26));
});

이와 같은 문법을 사용하면 코드가 자동으로 스플릿 된다.

dynamic import() 는 아직 언어 표준이 아닌 ECMA 제안이고 가까운 미래에 받아 들여 질것으로 예상 됩니다.

React.lazy

React.lazy 와 Suspense는 아직 서버 사이드 렌더링을 지원하지 않습니다. 만약 서버 사이드 렌더링에서 코드 스플릿을 원하시면 Loadable Components 모듈을 추천합니다.

before:

import OtherComponent from './OtherComponent';

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

after:

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

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}