✶ 항해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 />,
},
( ... 하략 )
}