ReactJS에서 코드 분할을 사용하는 방법

헤이 데브스👋

우리 모두는 ReactJS가 웹 애플리케이션에서 매우 인기 있는 라이브러리라는 것을 알고 있습니다. 프로젝트 소형, 중형 및 대형 앱을 만듭니다. 앱이 성장함에 따라 해당 앱의 번들도 커집니다. 특히 일부 타사 모듈을 사용할 때 그렇습니다. 실수로 너무 커져서 앱을 로드하는 데 오랜 시간이 걸립니다. 사용자가 앱과 얼마나 빨리 상호 작용할 수 있는지는 사용자가 앱에 머무르는 것과 정비례합니다.
그래서 웹앱의 성능을 높이는 방법 중 하나인 Code Splitting🔨에 대해 알아보겠습니다.

ReactJS에서 코드 분할이란 무엇입니까?

Code Splitting은 시간에 동적으로 로드할 수 있는 번들을 생성할 수 있는 기능입니다. 기본적으로 이 기능은 번들을 더 작은 청크로 분할합니다.

코드 분할을 사용하는 이유는 무엇입니까?

이것은 매우 흥미로운 질문입니다 👍. 때로는 단일 반응 구성 요소( LargeComponent )가 매우 커지며(자식 구성 요소가 많을 때 커짐) 한 번에 모든 자식이 필요하지 않습니다😶.

그러나 이러한 자식 구성 요소는 여전히 존재합니다. 프로젝트용 빌드를 생성하면 LargeComponent에 대한 전체 청크가 생성됩니다.
전체 청크가 렌더링을 위해 다운로드되는 웹 페이지의 초기 로드 중에 LargeComponent .

이것은 웹 페이지의 loading⌛ 시간을 증가시킬 것입니다.
이 로딩 시간을 극복하기 위해 코드 분할을 사용합니다. 따라서 초기 로드 시 해당 시간에 필요한 코드만 가져옵니다 🙂.



위의 이미지에서 볼 수 있듯이 LargeComponent라는 구성 요소가 있습니다. 이 구성 요소에는 3개의 하위 구성 요소가 있지만 초기 로드 시에는 Child1 및 Child2만 필요하지만 번들에는 LargeComponent에 대한 완전한 청크가 있습니다. Child1 , Child2 및 Child3 .



코드 분할을 사용한 후 Child3 에 대한 청크는 LargeComponent , Child1 및 Child2 와 별도로 생성됩니다.

코드 스피팅을 사용하는 방법?
React.lazy 😴 컴포넌트를 게으르게 만드는 기능이 그림에 들어옵니다. React.lazy 함수를 사용하면 동적 가져오기를 일반 구성요소로 렌더링할 수 있습니다.

전에:

import Child3 from './Child3';

후에:

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

이렇게 하면 이 구성 요소가 처음 렌더링될 때 Child3가 포함된 번들을 자동으로 로드합니다.
React.lazy는 동적import()을 호출해야 하는 함수를 사용합니다. 이는 React 구성 요소를 포함하는 기본 내보내기가 있는 모듈로 확인되는 Promise를 반환해야 합니다.

그런 다음 지연 구성 요소는 Suspense 구성 요소 내에서 렌더링되어야 합니다. 이를 통해 지연 구성 요소가 로드되기를 기다리는 동안 일부 대체 콘텐츠(예: 로드 표시기)를 표시할 수 있습니다.

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

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

function ParentComponent() {
  return (
    <div>
      <Child1/>
      <Child2/>
      <Suspense fallback={<div>Loading...</div>}>
        <Child3/>
      </Suspense>
    </div>
  );
}

위의 코드에서 볼 수 있듯이 Child1 및 Child2 구성 요소는 직접 가져옵니다. 그러나 Child3 구성 요소는 React.lazy를 사용하여 가져옵니다.

fallback 소품은 Child3 구성 요소가 로드되기를 기다리는 동안 렌더링하려는 모든 React 요소를 허용합니다.

이것은 ReactJS에서 코드 분할을 위한 가장 간단한 구현입니다.

희망🤞🏻 코드 분할🙂의 개념을 이해하셨기를 바랍니다.