Lieto: Lazy Loading (React.Lazy, Suspense) 🚀

컴포넌트가 꽤 많아지면서 (메인 컴포넌트 6개..ㅎㅎ..많나?..) 컴포넌트를 한번에 다 가져오지 않고 나누어서 import해오면 좋겠다 라고 생각을 했다.

그래서 동적인 Import를 가능하게 해주는 React.Lazy를 사용해봤다.

Lazy Loading 🎯

Lazy Loading 이란? 게으른 로딩?
웹 어플리케이션의 성능을 향상시키는 기술 중 하나로 웹 페이지가 처음 로드 될 때 필요하지 않은 리소스를 로드하지 않는 방식이다! 대신 사용자가 그것을 실제로 필요할 때 (Ex 특정 컴포넌트를 보여주고 싶을때) 로드될 수 있다.

장점?
"초기 로딩을 줄일 수 있다." + "어플리케이션의 전반적인 성능 향상"

즉, 꼭 컴포넌트가 아니더라도 이미지도 Lazy Loading을 통해 원하는 만큼만 가져올 수 있다.

;;🐕사기;;

오히려 과거에는 큰 이미지, 큰 파일에 적용되는 기술이었으나 현재는 컴포넌트까지 동적으로 로딩할 수 있다.

동작원리 🎯

React.lazy는 일단 동적으로 import할 수 있는 메서드이다.

이는 Promise를 인수로 받는다. 해당 Promise가 해결되면 로드된 파일이 반환이 된다!

이때 중요한건 Suspense이다.

Suspense 🎯

Suspense는 위 동작에서 해당 Promise가 pending인지 fullfill인지를 알고 loader를 제공해준다.

즉 ReactLazy를 사용하는 컴포넌트는 Suspense로 해당 작업이 잘 이루어졌는지 확인해야한다.

사용 🎯

import React from "react";
import { Suspense } from "react";
import { Loader } from "./Loader";

const Title = React.lazy(() => import("./Title/Title.jsx"));
const ArtistView = React.lazy(() => import("./Artist/View.jsx"));
const PosterView = React.lazy(() => import("./Poster/View.jsx"));
const MapView = React.lazy(() => import("./Map/View.jsx"));
function App() {
  //useEffect는 컴포넌트가 렌더링 될 때마다 작업을 실행할 수 있도록 하는 Hook
  // 만약 []를 넣으면 최초 1번 렌더링될 때 실행
  // []를 넣지 않으면 리렌더링할때마다 실행
  // 만약 특정 값이 업데이트 될 때 실행하고 싶다면 []에 해당 업데이트 변수를 넣어주면된다.

  return (
    <div className="App">
      <Suspense fallback={<Loader />}>
        <Title />
      </Suspense>
      <Suspense fallback={<Loader />}>
        <ArtistView />
      </Suspense>
      <Suspense fallback={<Loader />}>
        <PosterView />
      </Suspense>
      <Suspense fallback={<Loader />}>
        <MapView />
      </Suspense>
    </div>
  );
}

위 처럼 필자는 모든 컴포넌트를 동적으로 받아왔다. 사실 이렇게 할거라면 Loader에 스켈레톤 UI를 집어넣어주는게 더 좋을 거 같다.

저렇게 하니 성능은 어떤 차이를 보였을까?

성능차이 🎯

코드 스플리팅 하기전(React.lazy로 동적으로 받아오기전)

해당 파일을 받아오기 까지 14.24ms가 걸렸고

(그냥 핸드폰으로 찍어버림 ;;)

다음과 같이 Total Blocking Time은 360ms

First Contentful Paint 즉, 초기 로딩 시간이 1.9s가 나왔다.

코드 스플리팅을 한 후

해당 파일을 받아오기 까지 9.84ms가 걸렸고

Total Blocking Time은 절반 이상 감소한 160ms가 걸렸고

First Contentful Paint 즉, 초기 로딩 시간이 1.8s가 걸렸다. 그렇게 극적이진 않지만.. 노란불이 초록불로 바뀌는게 신기하고 보람있다.