React Code Splitting

코드 분할

대부분 React 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 번들 된 파일(bundle.js) 을 웹 페이지에 포함하여 한 번에 전체 앱을 로드한다.
때문에 프로젝트 규모가 커지면 bundle.js도 커져 되어 로드 시간이 길어지게 된다.

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

import()

앱에 코드 분할(함수 분할)을 도입하는 가장 좋은 방법은 동적 import() 문법을 사용하는 방법이다.
Webpack이 import 구문을 만나게 되면 앱의 코드를 분할한다.
Create React App을 사용하고 있다면 이미 Webpack이 구성되어 있기 때문에 즉시 사용이 가능하며,
Next.js 역시 지원한다.

// Before
import { add } from './math';
console.log(add(16, 26));

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

React.lazy

React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있다.

// Before
import OtherComponent from './OtherComponent';

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

MyComponent가 처음 렌더링될 때 OtherComponent를 포함한 번들을 자동으로 불러온다.
React.lazy는 동적 import()를 호출하는 함수를 인자로 가진다.
이 함수는 React 컴포넌트를 default export로 가진 모듈 객체가 이행되는 Promise를 반환한다.

lazy 컴포넌트는 반드시 Suspense 컴포넌트 하위에서 렌더링 되어야 하며 Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해준다.
fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 React Element를 받아들인다.

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Suspense 컴포넌트는 lazy 컴포넌트를 감싸며, 하나의 Suspense 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있다.

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

적절한 코드 분할

코드 분할을 할 때 사용자의 경험을 해치지 않으면서 번들을 균등하게 분배해야 한다.
적절한 코드 분할은 라우트 기반 코드 분할 이다.
웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 렌더링하며
이때, 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용 하지 않기 때문이다.

React.lazy를 React Router 라이브러리를 사용하여 라우트 기반 코드 분할을 설정한 예시이다.

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

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

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

---

References

• https://doqtqu.tistory.com/349#toc-React.lazy