[React] Code Splitting

코드 분할

Bundling

대부분 React 앱들은 Webpack, Rollup등을 사용하여 여러 파일을 하나로 병합한 "번들 된" 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드할 수 있다.

Code-splitting

번들링은 좋은 기능이지만, 큰 규모의 서드파티 라이브러리를 추가하게 되거나 앱이 점점 커질수록 즉, 번들이 커질수록 코드를 읽는 시간이 길어질 수 있다.

번들이 커지는 것을 방지하기 위해 좋은 방법은 번들을 "나누는" 것.

Code-splitting이란 런타임환경에서 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup 등의 번들러가 지원하는 기능이다.

코드분할은 앱을 lazy loading(지연 로딩) 하게 도와주고 사용자에게 더 좋은 성능을 가져다줄 수 있다.

코드의 양을 줄이지 않고도, 사용자에게 보여줄 필요가 없는 코드를 불러오지 않게하여 앱의 초기화 로딩에 필요한 비용을 줄여준다.

React.lazy()

React.lazy를 사용하면 동적 import를 사용해서 컴포넌트를 동적으로 렌더링할 수 있다. 컴포넌트가 렌더링되기 전까지 코드 로딩을 연기하는 것

동적 import()를 호출하는 함수를 인자로 가지며, 이 함수는 React 컴포넌트를 default export로 가진 모듈 객체가 이행되는 Promise를 반환해야한다.

lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야하며, Suspense는 lazy 컴포넌트가 로드되길 기다리는동안 로딩화면을 보여줄 수 있게 해준다.

 

아래 예시와 같이 lazy로 코드분할을 하려면 Suspense 컴포넌트 하위에 위치해주어야한다.

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

const loading = <div>화면을 불러오는 중 입니다.</div>;

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

//컴포넌트
const App = () => {
  return (
    <BrowserRouter>
      <Suspense fallback={loading}>
        <DefaultLayout />
      </Suspense>
    </BrowserRouter>
  );
};

export default App;