INTRO

리액트 프로젝트 산출물을 빌드 할때 코드 분할 하는 법에 대하여

브라우져를 통해 사용자가 첫 페이지에 접속을 하면 index.html & main.js파일을 다운로드 한다. 이때 로딩속도는 main.js의 용량과 비례 하므로 각 페이지에 필요한 파일만 분할 후 다운 받게하여 속도 향상을 할수 있다.

//root/config/webpack.js
output: {
  publicPath: isProduction ? "./" : "/", // 기본 경로
  path: path.join(ROOT, "/build/"), // 산출물 폴더
  filename: "main.js", // 파일명
  clean: true // 빌드시 폴더 클린
}

위 설정에 의해 빌드시 root/build/* 에 산출물이 생성된다.

├─ public
	└─ index.html
├─ build
    ├─ main.js
    ├─ index.html
    └─ main.js.map

Tech

• 작업 편의성의 위해 app.jsx의 router부분을 분할 하자(꼭 필요 한건 아님)

// App.jsx
import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import Routes from "@/config/Routes";
import Navigation from "@/navigation";

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

export default App;

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

import Home from "@/pages/Home";
import Category1 from "@/pages/Category1";
import Category2 from "@/pages/Category2";
import NotFound from "@/pages/NotFound";
import Page1 from "@/pages/Category1/Page1";
import Page2 from "@/pages/Category1/Page2";
import Page3 from "@/pages/Category2/Page3";

const Routes = () => {
  const element = useRoutes([
    { path: "/", element: <Home /> },
    {
      path: "/category1",
      element: <Category1 />,
      children: [
        { path: "/category1/", element: <Page1 /> },
        { path: "/category1/page1", element: <Page1 /> },
        { path: "/category1/page2", element: <Page2 /> }
      ]
    },
    {
      path: "/category2",
      element: <Category2 />,
      children: [
        { index: true, element: <Page3 /> },
        { path: ":slug", element: <Page3 /> }
      ]
    },
    { path: "*", element: <NotFound /> }
  ]);
  return element;
};

export default Routes;

1. React.lazy()

// config/Route.jsx
...
import Home from "@/pages/Home";

- import Category1 from "@/pages/Category1";
- import Category2 from "@/pages/Category2";
- import Page1 from "@/pages/Category1/Page1";
- import Page2 from "@/pages/Category1/Page2";
- import Page3 from "@/pages/Category2/Page3";

+ const Category1 = React.lazy(() => import("@/pages/Category1"));
+ const Category2 = React.lazy(() => import("@/pages/Category2"));
+ const Page1 = React.lazy(() => import("@/pages/Category1/Page1"));
+ const Page2 = React.lazy(() => import("@/pages/Category1/Page2"));
+ const Page3 = React.lazy(() => import("@/pages/Category2/Page3"));
...

• lazy를 이용해 import할 경우 코드 분할이 자동으로 이루어 진다.

yarn build

├─ build
    ├─ 111.main.js
    ├─ 111.main.js.map
    ├─ ...
    ├─ main.js
    ├─ index.html
    └─ main.js.map

위 빌드 결과물처럼 자동으로 분할 파일이 생긴다.