코드 분할(Code Splitting) feat.리액트

제이밍·2021년 12월 1일

코드분할

왜? 코드분할(CodeSplitting)을 해야할까?

대부분은 React앱들은 Webpack, Rollup, Browserify 같은 툴을 이용해 여러 파일을 하나로 병합해
번들된 파일을 웹 페이지에 포함해 한번에 전체 앱을 로드합니다.

🧶 이때 생기는 문제점이 있습니다.

서비스가 비교적 가벼운 편이라면 큰 문제가 없겠지만 프로젝트가 덩치가 커지고 전달해야하는 데이터의 양이 커지게 되면 성능적 문제가 발생하게 됩니다.

특히 서드파티 라이브러리까지 추가된다면 로드 시간이 길어지는 것은 당연한 일입니다.

이러한 번들이 거대해 지는 것을 방지하기 위해 나온 해결방법중 하나가 바로 코드분할
말그대로 나누는 것입니다.

🪡 어떻게 성능향상에 도움이 되나요?!

1.지연로딩하게 도와주어 앱 사용자에게 획기적인 성능 향상을 지원합니다.
2. 코드 양을 줄이지 않아도, 사용자가 필요하지 않는 코드는 불러오지 않게 되어 로딩에 필요한 비용을 줄여줍니다.

코드 분할 방법

import()

코드 분할을 도입하는 가장 좋은 방법 중 하나는 동적 import() 사용입니다.

Before

import { add } from './math';

console.log(add(16, 26));

After

import("./math").then(math => {
  console.log(math.add(16, 26));
});

Create React App을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 사용할 수 있습니다! (그렇지 않을 경우 번들링 설정이 필요합니다)

React.lazy

React.lazy 함수를 사용해 동적 import를 렌더링할 수 있습니다.

Before

import OtherComponent from './OtherComponent';

After

const OtherComponent = React.lazy(() => import('./OtherComponent'));

MyComponent가 렌더링 될 때 OtherComponent를 포함한 번들을 자동으로 불러옵니다.

Suspense 컴포넌트는 lazy 컴포넌트를 감싸야 하며 fallback prop으로 컴포넌트가 로드 될때까지 로딩화면 같은 예비 컨텐츠를 보여줄 수 있게 합니다.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

📍주의사항📍
1.React.lazy는 현재 default exports만 지원합니다. named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성할 수 있습니다
2.React.lazy와 Suspense는 아직 서버 사이드 렌더링을 지원하지 않습니다.

📖 코드 분할 도입은 어디가 적절할까?

그렇다면 과연 번들을 균등하게 분배할 곳은 어디가 적절한가?!

바로 라우트입니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느정도 발생하며 대부분 페이지를 한번에 렌더링 하기 좋고, 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용 하지 않습니다!

React.lazy를 React Router 라이브러리를 사용해 코드분할을 설정한 예 입니다.

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

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);