[07.19] 코드 분할

코드분할 (Code Spliting)

대부분 React 앱들은 Webpack, Rollup과 같은 툴을 사용해 여러 파일을 하나로 병합한 번들링(Bundling)을 하여 웹페이지에 포함하여 한 번에 전체 앱을 로드할 수 있다

• 번들링은 앱이 커지면 커질수록 같이 커지켜 큰 규모의 서드 파티 라이브러리를 추가할 때 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴봐야함
• 이러한 단점을 보완하기위해 번들을 나누기 시작

  📍 Webpack이란?
  자바스크립트 모듈 번들러 중 하나이며, 주로 대규모 복잡한 프로젝트에 많이 사용되고 다양한 유형의 파일을 모듈로 취급하고 이들을 의존성 그래프로 관리하여 번들 파일을 생성함
  
  📍 Rollup이란?
  더 경량화되고 주로 라이브러리나 패키지를 위한 번들링에 많이 사용되는 자바스크립트 모듈 번들러 중 하나이며, Webpack보다 간단하며 트리 쉐이킹과 같은 기능을 통해 번들 크기를 최적화하는데 적합

React.lazy()와 Suspense

React.lazy()의 컴포넌트가 다운되지 않았으면 suspense에 있는 내용을 보여주고 다 다운이되면 그때 해당 컴포넌트를 보여주고 suspense내용은 사라짐 (비동기처리)

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