Code Splitting 테스트해보자

코드 분할이란?

리액트에서의 코드 분할에 대해 알아보겠습니다. 유저가 처음 웹 페이지에 접속했을때 빌드된 main.js 파일을 로드한다고 생각해봅시다. 만약 프로젝트의 규모가 커진다면 main.js 파일의 크기 또한 커질 것이고 이를 로드하는데 많은 시간이 걸리므로 사용자 경험의 퀄리티가 저해될 것입니다.

따라서 main.js를 여러 파일로 나눠, 용량을 줄여줘야만 하겠죠? 여기서 사용하는 기술이 코드 분할입니다.

코드 분할의 방법

코드 분할을 하기 위해서는 물론 bundler가 설치되어있어야겠죠? 저는 제일 익숙한 webpack을 사용했습니다.

내장 import 함수 사용하기

코드 분할을 하는 가장 좋은 방법은 import() 문법을 사용하는 것이라고 공식 docs에 나와있습니다.

아래와 같이 button을 클릭했을 때 클릭이라는 경고창을 뜨게 해보죠.

App.js

function App() {
  const handleOnClick = () => {
    import("./click").then((click) => { // 이렇게 import를 사용해 코드분할을 해줍니다.
      click.default();
    });
  };

  return (
    <>
      <div>Hello World!</div>
      <button onClick={handleOnClick}>클릭</button>
    </>
  );
}

click.js

export default function click() {
  alert("클릭");
}

이렇게 하면 click.js 파일을 따로 분할시킬 수가 있어서 초기 렌더링시의 파일 용량을 줄일 수가 있습니다.

React.lazy

React.lazy 함수를 사용하면 필요한 시기에 동적으로 import 함수를 사용해서 컴포넌트를 렌더링하바니다.

React.lazy는 아직 서버 사이드 렌더링을 할 수 없기 때문에 이를 위해 Lodable Components를 사용하세요.

리액트 공식 문서에 따르면 코드 분할을 어디에서 사용할지 판단하는 것은 매우 어렵다고 말합니다.

대표적으로 번들 파일을 균등하게 분배하기 가장 좋은 시작점이 라우트이므로 react-router-dom 라이브러리를 활용해 각각의 라우트 컴포넌트를 React.lazy 로 불러옵니다.

Suspense 컴포넌트는 React.lazy를 통해 불러오는 동안 보여줄 렌더링 엘리먼트를 fallback 어트리뷰트로 설정합니다.

import React, {Suspense, lazy} from "react";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";

const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));
const Project = lazy(() => import("./pages/Project"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>loading...</div>}>
        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/about" component={About} />
          <Route path="/project" component={Project} />
        </Switch>
      </Suspense>
    </Router>
  );
}

Home About Project 세 개의 페이지 컴포넌트를 lazy 로딩했습니다.

페이지 첫 렌더링 시 로드된 파일 (Home)

About` 컴포넌트

**Project 컴포넌트**

Home About Project 가 각각 로드될 때 3.chunk.js 2.chunk.js 4.chunk.js 파일이 로드된 것을 확인할 수 있습니다.

lazy를 사용하지 않았다면 하나의 파일에 모든 코드가 들어있으므로 페이지 전환을 하더라도 네트워크에서 새로 로드되는 파일은 없을 것입니다.