1. Intro

전 로그에서 lazy를 이용 하여 빌드시 js파일을 분할 하는 법에 연장으로
이번에는 페이지 별로 필요한 소스만 로드하는 방법을 기재 한다.

@/pages/index.tsx

import Navigation from "@/components/Navigation";
import React from "react";
import { Outlet } from "react-router-dom";

const Contents = () => {
  return (
    <div className="flex flex-row justify-center min-h-screen">
      <div className="w-[1080px]">
        <Navigation className="bg-blue-200 h-32 flex items-center" />
        <div className="bg-blue-50">
          <Outlet />
        </div>
      </div>
    </div>
  );
};

export default Contents;

@/config/Routes.tsx

import Home from "@/pages/Home";
import NotFound from "@/pages/NotFound";
import Contents from "@/pages";
import React, { ComponentType } from "react";
import { RouterProvider, createHashRouter as createRouter } from "react-router-dom";

/**
 * A utility function for lazy loading a React component.
 * @param {() => Promise<{ default: ComponentType<any> }>  } callback
 * A function that returns a dynamic import statement for the component.
 * @returns {JSX.Element} A React component wrapped in React.lazy for lazy loading.
 */
export function lazyComp(callback: () => Promise<{ default: ComponentType<any> }>): JSX.Element {
  // Use React.lazy to lazily load the component defined by the callback.
  const ReturnComponent = React.lazy(() => callback());

  // Return the lazily loaded component within JSX.
  return <ReturnComponent />;
}

const router = createRouter([
  {
    path: "/",
    element: <Contents />,
    children: [
      { path: "/", element: <Home /> },
      {
        path: "/category1",
        element: lazyComp(() => import("@/pages/Category1")),
        children: [
          { path: "/category1/page1", element: lazyComp(() => import("@/pages/Category1/Page1")) },
          { path: "/category1/page2", element: lazyComp(() => import("@/pages/Category1/Page2")) },
          { path: "/category1/page3", element: lazyComp(() => import("@/pages/Category1/Page3")) },
          { path: "/category1/page4", element: lazyComp(() => import("@/pages/Category1/Page3")) }
        ]
      },
      { path: "*", element: <NotFound /> }
    ]
  }
]);

const MyRouterProvider = () => {
  return <RouterProvider router={router} fallbackElement={<NotFound />} future={{ v7_startTransition: true }} />;
};

export default MyRouterProvider;

@/App.tsx

import MyRouterProvider from "@/config/Routes";
import React from "react";

const App = () => <MyRouterProvider />;

export default App;