코드 스플리팅 적용하기

이번에는 코드 스플리팅을 적용할 차례입니다. 리액트 프로젝트에서 컴포넌트 코드를 스플리팅하기 위해선 가장 정석적인 방법으로 React.Suspense 와 React.lazy() 를 사용하는 방법이 있습니다. 하지만, 이 방법은 서버사이드 렌더링을 지원하지 않습니다. 따라서, 우리는 loadable-components 를 사용하여 구현을 하도록 하겠습니다. 이 라이브러리는 서버사이드 렌더링도 지원해주고, 추가적으로 렌더링 이후 사용자에게 렌더링 하기 전에 어떤 파일들을 미리 불러와야 하는지 쉽게 명시 할 수 있습니다.

우선 loadable-components 관련 라이브러리들을 설치해주세요.

$ yarn add @loadable/component @loadable/server @loadable/webpack-plugin @loadable/babel-plugin

이제 컴포넌트를 코드 스플리팅 해주겠습니다. App.js 에서 처리를 하시면 되는데요, 굉장히 간단합니다.

App.js

import React from 'react';
import { Route } from 'react-router-dom';
import loadable from '@loadable/component';
import Menu from './components/Menu';
const RedPage = loadable(() => import('./pages/RedPage'));
const BluePage = loadable(() => import('./pages/BluePage'));

const App = () => {
  return (
    <div>
      <Menu />
      <hr />
      <Route path="/red" component={RedPage} />
      <Route path="/blue" component={BluePage} />
    </div>
  );
};

export default App;

코드 스플리팅 하고자 하는 코드를 위와 같이 loadable 로 감싸주시면 됩니다.

개발서버에서 스플리팅이 잘 되고있는지 확인해보세요. Network 탭을 열은 상태에서 다른 페이지로 이동하면 새 파일을 불러오는 것을 확인 할 수 있습니다.