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

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

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

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

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

import

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

React.lazy란?

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

React에서 컴포넌트 파일을 코드의 최상단에 import로 정의하고 동적으로 불러오기를 사용하면 에러가 발생합니다. 따라서 컴포넌트를 동적으로 불러오기 위해서는 React.lazy()를 사용해야 합니다. React.lazy() 메서드를 사용하면 동적 가져오기를 사용하여 컴포넌트 수준에서 React 애플리케이션을 쉽게 코드 분할할 수 있습니다.

React.lazy를 사용하는 이유

일반적으로 규모가 큰 React 애플리케이션은 많은 컴포넌트, 라이브러리 등으로 구성됩니다. 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 JavaScript 번들이 사용자에게 전송됩니다.

이는 페이지 성능에 상당한 영향을 줄 수 있습니다. React.lazy() 메서드 컴포넌트 들은 손쉽게 개별 JavaScript 청크로 분리하는 기본 제공 방법을 제공합니다.

import OtherComponent from './OtherComponent';

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