[Team Project] Bid Panda ep.7

✶ 항해99 16기 3조
팀 프로젝트 Bid Panda의 FE 개발일지

Issue ▸

최적화의 첫번째 단계로, 브라우저 첫 접근에서 로딩되는 번들 사이즈를 줄이기 위해 React lazy를 사용했다.

Solve :

Router.ts에서 페이지 라우팅 자체에 React lazy를 걸어주는 방식으로, 23% 번들 사이즈를 개선 했다. ( 2600.3kB > 2012.0kB )
그리고 페이지 라우팅을 기준으로 최적화 했고, 하나의 파일에서 한 번에 관리했기 때문에 차후 수정과 개선에 도움이 될 만한 구조라고 생각한다.

import React from "react";
import { createBrowserRouter } from "react-router-dom";

import App from "./App";
import Main from "./pages/hub/Mainpage";
import Kakao from "./components/modules/Kakao";
import NotFound from "./pages/error/NotFound";
import ErrorComponent from "./pages/error/ErrorComponent";

const Login = React.lazy(() => import("./pages/users/Login"));
const RegisterUser = React.lazy(() => import("./pages/users/RegisterUser"));
const Mypage = React.lazy(() => import("./pages/hub/Mypage"));
const EditUserInfo = React.lazy(() => import("./pages/hub/EditUserInfo"));
const SearchAution = React.lazy(() => import("./pages/search/SearchAution"));
const ChattingList = React.lazy(() => import("./pages/chat/ChattingList"));
const ChattingRoom = React.lazy(() => import("./pages/chat/ChattingRoom"));
const RegisterProduct = React.lazy(
  () => import("./pages/auction-register/RegisterProduct")
);
const ModifierProduct = React.lazy(
  () => import("./pages/auction-register/ModifierProduct")
);
const AuctionDetail = React.lazy(
  () => import("./pages/auction-detail/AuctionDetail")
);
const AuctionList = React.lazy(
  () => import("./pages/auction-list/AuctionList")
);
const AuctionCard = React.lazy(
  () => import("./pages/auction-list/AuctionCard")
);

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "",
        element: <Main />,
      },
      {
        path: "login",
        element: <Login />,
      },
      {
        path: "kakao",
        element: <Kakao />,
      },
      {
        path: "register",
        element: <RegisterUser />,
      },
      {
        path: "mypage",
        element: <Mypage />,
      },
    ( ... 하략 )
  }