Loadble 이용해 코드 스플리팅

Lodable 사용해서 스플리팅하기

Lodable 라이브러리를 이용해 쉽게 스플리팅 할 수 있습니다.
npm i @loadable/component
npm i --save-dev @types/loadable__component : TS 사용 시

App 컴포넌트

import loadable from "@loadable/component";
import { Switch, Route, Redirect } from "react-router-dom";

1️⃣const Login = loadable(() => import("@pages/Login"));
const SignUp = loadable(() => import("@pages/SignUp"));

const App = () => {
  return (
    <Switch>
      <Redirect exact path="/" to="/login" />
      <Route path="/login" component={Login} />
      <Route path="/signup" component={SignUp} />
    </Switch>
  );
};

export default App;

1. 위에 설명한 것 처럼 페이지 단위로 코드 스플리팅할 수 있습니다. 따라서 보통 Route를 설정하는 App 컴포넌트에서 코드 스플리팅을 설정했습니다.
   loadable 라이브러리를 이용해 쉽게 설정할 수 있습니다.
   const Login = loadable(() => import("@pages/Login"));