1. 코드 분할(Code Spliting)이 필요한 이유

대부분의 React 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 번들 파일을 웹 페이지에 포함해 한 번에 전체 앱을 로드한다. 아래는 여러 파일이 하나의 파일로 번들링되는 예시이다.

App

// app.js
import { add } from './math.js';

console.log(add(16, 26));// 42

Bundle

function add(a, b) {
  return a + b;
}

console.log(add(16, 26));// 42

하지만, 앱이 커지면 번들 파일도 커지게 된다. 특히 큰 규모의 서드 파티 라이브러리를 추가할 때 실수로 앱이 커저서 로드 시간이 길어지는 것을 방지하기 위해 주의해야 한다.

번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 나누는 것이다. 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 Browserify(factor-bundle) 같은 번들러가 지원하는 기능이다.

코드 분할은 앱을 "지연 로딩"하게 도와주고 앱의 획기적인 성능 향상을 돕는다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여준다.

2. import

Webpack이 import 구문을 만나게 되면 앱의 코드를 분할한다. Create React App을 사용하고 있다면 이미 Webpack이 구성되어 있기 때문에 즉시 사용이 가능하다. Next.js 역시 지원한다.

3. React.lazy

React.lazy 함수를 사용하면 동적 import를 사용해 컴포넌트 렌더링이 가능하다.

Before

import OtherComponent from './OtherComponent';

After

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

MyComponent가 처음 렌더링될 때 OtherComponent를 포함한 번들을 자동으로 불러온다.