react 리액트 코드스플리팅

페이지 단위 컴포넌트는 한 번에 여러 개를 미리 렌더링을 해놓을 필요 없기 때문에 라우터 페이지에서 초기렌더링속도 최적화를 위해서 리액트에서 코드스플리팅을 하는 게 좋음.
페이지 단위 컴포넌트 외에도 에디터같은 것도 코드 스플리팅하면 좋음

npm install @loadable/component
npm install --save @types/loadable__component

로더블 컴포넌트라는 npm 라이브러리가 있음

타입스크립트 안쓰면 위에 하나만 쓴다면 아래에 타입도 다운을 받아야 함

 

// 공식문서 예제
import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

 

import { Routes, Route } from "react-router-dom";
import loadable from "@loadable/component";
import MyPageDonation from "@/components/MyPageDonation";
import MyPageInfo from "@/components/MyPageInfo";
import MypageFav from "@/components/MypageFav";
import AdminPage from "@/pages/AdminPage";
import AdminPageDonationList from "@/components/AdminPageDonationList";
import AdminPageAccountList from "@/components/AdminPageAccountList";
import KaKaoLogin from "@/components/KaKaoLogin";
import NaverLogin from "@/components/NaverLogin";
const MainPage = loadable(() => import("@/pages/MainPage"));
const SignInPage = loadable(() => import("@/pages/SignInPage"));
const LoginPage = loadable(() => import("@/pages/LoginPage"));
const DetailPage = loadable(() => import("@/pages/DetailPage"));
const MyPage = loadable(() => import("@/pages/MyPage"));

const Router = () => {
  return (
    <Routes>
      <Route path="/" element={<MainPage />} />
      <Route path="/signin" element={<SignInPage />} />
      <Route path="/login" element={<LoginPage />} />
      <Route path="/kakao/oauth/logout" element={<LoginPage />} />
      <Route path="/kakao/oauth" element={<KaKaoLogin />} />
      <Route path="/naver/oauth" element={<NaverLogin />} />
      <Route path="/detail/:id" element={<DetailPage />} />
      <Route path="/mypage" element={<MyPage />}>
        <Route index element={<MyPageDonation />} />
        <Route path="info" element={<MyPageInfo />} />
        <Route path="fav" element={<MypageFav />} />
      </Route>
      <Route path="/admin" element={<AdminPage />}>
        <Route index element={<AdminPageDonationList />} />
        <Route path="account" element={<AdminPageAccountList />} />
      </Route>
    </Routes>
  );
};
export default Router;

이번 프로젝트에서 이렇게 적용해서 사용 중임

 

https://loadable-components.com/

Loadable Components