프로젝트를 최적화하는 다양한 방법 - lazy loading

기록이 쌓이면 기억이 된다·2024년 1월 17일

✔️ 코드 스플리팅(Code-Splitting)

: 커다란 번들을 작은 여러개의 청크로 나누는 과정으로 코드 스플리팅을 통해 유저가 필요하지 않은 코드들을 다운 받지 않도록 할 수 있다.

➕ 코드 스플리팅 적용 시 이점

: 어플리케이션 규모가 커질수록 번들 사이즈는 증가하게 되고 초기 로딩 속도가 증가할수 밖에 없다. 이때 코드 스플리팅을 적용하면 현재 필요한 코드만 다운 받을 수 있게 되어 첫 페이지 랜딩 속도를 더 빠르게 향상시켜 사용자 경험을 향상시킬 수 있다.

<공식 문서>
앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다.

➕ React.lazy 적용하기

1️⃣ import 하기

import {lazy, Suspense} from "react"

2️⃣ const 컴포넌트명(변수명) = lazy(() => import('@componenets/auth/PrivateRoute'))

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

3️⃣ Suspense로 컴포넌트들 감싸주기

: lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 한다.

     <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>

4️⃣ fallback 옵션 지정하기

: Suspense는 컴포넌트가 lazy loading되는 동안 보여줄 ui를 만드는 fallback props를 제공한다.

import React, { Suspense } from 'react';

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

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