코드 분할

https://ko.reactjs.org/docs/code-splitting.html를 읽고 정리한 글입니다

 

• 번들링
  • 대부분 React 앱들은 Webpack, Rollup, Browserify 등을 이용하여 여러 파일들을 하나로 통합한 파일을 웹페이지에 포함해 한번에 로드한다
  • CRA, Next.js, Gatby 등은 Webpack을 함께 설치 (직접 설치도 가능)
• 코드 분할
  • 번들이 커질 경우 로드 시간이 길어진다
  • 코드 분할은 번들러가 지원하는 기능으로, 런타임에 여러 번들을 동적으로 만들고 불러온다
  • 코드 분할을 통해 앱을 지연 로딩 & 성능 향상 ⇒ 앱 초기화 로딩의 비용 감소
  • import()를 이용하기

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

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

• React.lazy
  • 서버사이드렌더링 불가능하므로 서버에서 렌더링된 앱에서 코드 분할을 원할 경우 Loadable Components 추천
  • 동적 import를 사용하여 컴포넌트 렌더링 가능
  • Error boundaries를 만들고 lazy 컴포넌트로 감싸면 네트워크 장애시 에러 표시 가능

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';

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

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

• Route-based code splitting
  • 페이지를 렌더링할 때 다른 요소와 상호작용 없으므로 라우트에서 번들 분배하기 좋다 
  • 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>
);

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>
);

• Named Exports
  • React.lazy는 default exports만 지원
  • Named Exports를 원할 경우 default로 이름 재정의한 중간 모듈 생성하기 ⇒ tree shaking이 계속되고 사용하지 않는 컴포넌트는 안 가져온다

// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));