Lazy Loading

Lazy Loading을 사용하게 된 이유

SejongPeer를 리팩토링하면서 성능 최적화를 하기로 했다.
그 중 첫 번째 단계가 바로 Lazy Loading인데 무슨 개념인지 알아보자.

Lazy Loading이란?

보통 웹페이지를 불러올 때 페이지 전체에 대한 데이터(리소스)를 불러오면서 초기 로드 시간이 길어지고, 사용자가 당장 필요하지 않은 리소스까지 모두 다운로드하므로 불필요한 네트워크 사용을 초래한다.

때문에 페이지 수가 수십 페이지 정도 되는 SejongPeer에게는 꼭 필요한 기능 중에 하나라고 생각했다.

기존에 도입하려는 방식

기존에는 React의 React.lazy()와 Suspense를 사용해 지연 로딩 중 로딩 상태를 표시하려고 했다.
하지만 우린 프로젝트 사이즈가 크기도 하고 추후 React Query를 도입할 가능성(물론 나만의 생각이지만)이 있기에
React Router v6에서의 Lazy Loading을 사용하려고 한다.

기존의 App.tsx 코드에 대해 알아보자.

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
  },
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    path: "/register",
    element: <RegisterPage />,
  },
]);

export const App = () => {
  return (
    <>
      {/* <Header /> */}
      <Toaster position="bottom-center" richColors />
      <GlobalStyles />
      <RouterProvider router={router}></RouterProvider>
    </>
  );
};

기존엔 createBrowserRouter을 사용하여 단순히 페이지만 렌더링시켜주었다.

다음은 lazy loading을 적용한 코드를 알아보자.

// 라우터 설정
const router = createBrowserRouter([
  {
    path: "/",
    lazy: async () => {
      const { HomePage } = await import("./pages/home-page");
      return {
        Component: HomePage,
      };
    },
  },
  {
    path: "/login",
    lazy: async () => {
      const { LoginPage } = await import("./pages/login-page");
      return {
        Component: LoginPage,
      };
    },
  },
  {
    path: "/register",
    lazy: async () => {
      const { RegisterPage } = await import("./pages/register-page");
      return {
        Component: RegisterPage,
      };
    },
  },
]);

export const App = () => {
  return (
    <>
      {/* <Header /> */}
      <Toaster position="bottom-center" richColors />
      <GlobalStyles />
      <RouterProvider router={router} />
    </>
  );
};

코드에 대해 설명해보자.

세부 동작 과정

1. 초기 로드 시점

페이지가 처음 로드될 때, 즉시 HomePage 컴포넌트를 불러오지 않고, 사용자가 해당 경로 "/"로 접속할 때
비로소 import()로 컴포넌트를 로드한다.

즉 브라우저가 / 경로에 처음 접속할 때, 페이지를 불러오는 동안 HomePage 컴포넌트는 즉시 로드되지 않는다는 것이다.

2. async, await를 통한 동적 loading

사용자가 해당 경로로 이동하면 lazy 옵션 안에 정의된 비동기 함수가 호출된다.
이때 import() 함수가 실행되어 HomePage 모듈을 서버로부터 비동기로 가져오게 된다.

await import('./pages/home-page')는 서버에 HomePage 컴포넌트가 포함된 JavaScript 파일을 요청하고,
이 파일이 로드되면 해당 모듈의 HomePage 컴포넌트를 반환한다.

3. 컴포넌트 로드 후 렌더링

해당 모듈이 성공적으로 로드되면, 반환된 HomePage 컴포넌트가 화면에 렌더링된다.
이후 해당 페이지로 다시 접근할 때는 이미 로드된 JS 파일이 캐시되어 재요청 없이 빠르게 렌더링된다.

정리

이처럼, lazy loading을 사용하면 처음에 필요한 최소한의 JS 파일만 로드되고, 각 페이지에 필요한 파일은 해당 페이지에 접속할 때 로드된다.
따라서 초기 페이지 로드 시간을 줄이는 데 매우 효과적이다.

리팩토링 과정에서 아직 많은 페이지가 만들어진 것이 아니라서 성능이 99점 나오지만 이를 유지해보려고 노력하자.