React lazy,와 Suspense를 활용하여 Code Splitting 하기

리엑트에서는 보통 webpack,Roll up등을 이용하여서, 내 코드를 하나의 bundle 파일로 묶은 다음에  사용한다.

하나의 파일로 묶어서 관리하는 것 자체는 좋은데, 만약 App의 크기가 커지게 된 경우에는 초기 로딩속도가 느려지게 된다.

이를 해결하기 위한 방법인 code Splitting이다. 각각의 페이지에 필요한 내용을 쪼갠 후에 필요한 시점에 동적으로 로딩하는 방법이고, React에서는 Lazy를 통해서 이를 구현할 수 있다.

import React, { Suspense } from 'react';

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

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

공식 문서에 있는 예시는 위와 같은데 React.lazy를 사용하여서 동적인 임포트를 하고, Suspense를 통해서 로딩되는 동안 보여줄 컴퍼넌트를 등록한다.

 

이를 앱에 등록하여 성능 탭을 통해서 확인할 수 있는데, 우리가 확인할 것은 FP(초기 페인팅)이다.

스플리팅 전에는 1.16초가 걸렸고 bundle.js 파일을 로드하는 데는 93ms이 걸렸는데

스플리팅 이후에는 0.77(774밀리)초가 걸렸고  bundle.js 로드 속도도 66ms로  로드 시간이 감소됐다.

FP의 시간이 34프로나 감소가 된다.

 

 

 

 

코드스플리팅 후

 

 

이후 컴퍼넌트 이동을 할 경우에 노란색 파일들이 먼저 로드되고, 이때 chunk파일들이 페이지마다 개별적으로 로드됨을 확인할 수 있다.

참고  문헌

https://legacy.reactjs.org/docs/code-splitting.html

Code-Splitting – React