<aside> 💡

목차

</aside>

평생 게을리 살고 싶네요.

🍀 Lazy loading이란?

• Lazy Loading은 필요한 리소스만 요청하여 로드하는 기법입니다.
• 주로 JavaScript 파일, 이미지, 컴포넌트 등을 처음부터 모두 로드하지 않고, 사용자가 필요한 시점에 로드합니다.
• React에서는 **React.lazy*와 **Suspense*를 사용하여 컴포넌트 단위로 지연 로드를 구현합니다.

🍀 실제 서비스에 적용하기

Before (Lazy Loading 미적용)

import { HomePage, NotFound, WorkspacePage } from '@/pages';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { ToasterWithMax } from '@/shared/ui';
import { ErrorPage } from '@/pages/ErrorPage/ErrorPage';

const router = createBrowserRouter([
  {
    path: '/',
    element: <HomePage />,
    errorElement: <ErrorPage />,
  },
  {
    path: '/workspace/:workspaceId',
    element: <WorkspacePage />,
    errorElement: <ErrorPage />,
  },
  {
    path: '*',
    element: <NotFound />,
  },
]);

export const App = () => (
  <>
    <ToasterWithMax />
    <RouterProvider router={router} />
  </>
);

export default App;

• 모든 페이지 컴포넌트를 한 번에 로드합니다.
• 초기 번들 크기가 커져 네트워크 비용 증가와 초기 로딩 시간 지연이 발생할 수 있습니다.

After (Lazy Loading 적용)

import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { ToasterWithMax } from '@/shared/ui';
import { ErrorPage } from '@/pages/ErrorPage/ErrorPage';
import { lazy, Suspense } from 'react';
import { Loading } from '@/shared/ui';

// lazy 로딩
const HomePage = lazy(() =>
  import('@/pages/HomePage/HomePage').then((module) => ({ default: module.HomePage }))
);

const WorkspacePage = lazy(() =>
  import('@/pages/Workspacepage/WorkspacePage').then((module) => ({
    default: module.WorkspacePage,
  }))
);

const NotFound = lazy(() =>
  import('@/pages/NotFound/NotFound').then((module) => ({ default: module.NotFound }))
);

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <Suspense fallback={<Loading />}>
        <HomePage />
      </Suspense>
    ),
    errorElement: <ErrorPage />,
  },
  {
    path: '/workspace/:workspaceId',
    element: (
      <Suspense fallback={<Loading />}>
        <WorkspacePage />
      </Suspense>
    ),
    errorElement: <ErrorPage />,
  },
  {
    path: '*',
    element: (
      <Suspense fallback={<Loading />}>
        <NotFound />
      </Suspense>
    ),
  },
]);

export const App = () => (
  <>
    <ToasterWithMax />
    <RouterProvider router={router} />
  </>
);

export default App;

• 각 페이지를 필요할 때만 로드하도록 React.lazy와 Suspense를 사용.