[STUDY] 코드분할

번들링

대부분의 리액트 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 "번들 된" 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있습니다.

 

* Webpack 은 의존된어 있는 모든 자바스크립트 파일을 하나로 묶어 번들링 한다.

이미지, 폰트, 스타일시트 같은 비 자바스크립트 파일은 로더를 이용하여 변경한다.

 

참고 자료 : https://jeonghwan-kim.github.io/js/2017/05/15/webpack.html

코드 분할

번들이 거대해지는 것을 방지하지 위해 코드 분할을 한다. 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것이며 위에 언급한 번들러 툴이 지원하는 기능이다.

import()

동적으로 import() 문법을 사용하는 방법입니다.

 

import { add } from './math';

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

After

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

 

Babel을 사용할 때는 Babel이 동적 import를 변환 하지 않도록 babel-plugin-syntax-dynamic-import를 사용하세요.

React.lazy

* React.lazy와 Suspense는 아직 서버 사이드 렌더링을 할 수 없기떄문에 서버에서 렌더링 된 앱에서 코드 분할을 하기 원한다면 Loadable Components를 추천합니다.

 

React.lazy 함수와 동적 import를 사용해서 컴포넌트를 렌더링 하기

import OtherComponent from './OtherComponent';

After

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

lazy 컴포넌트는 Suspense 컴포는트 하위에서 렌더링 되어야 하고 Suspense는 lazy 컴포넌트가 로드 되길 기다리는 동안 로딩 화면과 같은 컨텐츠를 보여 줄 수 있게 합니다.

import React, { Suspense } from 'react';

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

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

Error Boundaries

네트워크 장애 같은 이유로 모듈을 로드에 실패할 경우 에러를 발생 시킬 수 있습니다. ErrorBoundaries를 만들고 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를 ReactRouter 라이브러리를 사용해서 애플리케이션에 라우트 기반 코드 분할을 설정하는 예시 입니다.

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

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

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