6편 Code Splitting 과 React lazy, Suspense

6편 Code Splitting 과 React lazy, Suspense

이전에 webpack을 통해서 비슷한 파일을 묶어서 하나의 파일로 만드는 것을 Bundling이라고 했다. 

 

즉 js, css, html 각각을 하나의 파일로 묶어서 번들링 해준다. 

 

물론 각각의 파일을 하나로 묶어주어서 여러 개의 파일을 가져올때 보다 훨씬 편해지겠지만 하나의 파일이 너무 용량이 커져버리면 오히려 가져오는데 더 오랜시간이 걸리고 힘들어진다.

 

bundle-analyzer를 사용하면 이를 편하게 확인할 수 있다. webpack에 설정을 해줘야 하지만 필자는 현재 CRA를 통해서 만들었기 때문에 webpack 설정을 바꿀 수가 없어서 아래의 라이브러리를 사용하면 된다.

 

www.npmjs.com/package/cra-bundle-analyzer

cra-bundle-analyzer

설치 방법

# NPM 
npm install --save-dev cra-bundle-analyzer
# Yarn 
yarn add -D cra-bundle-analyzer

npx cra-bundle-analyzer

 

왼쪽 부분은 정적으로 한번에 가져온 코드들이다 실행하는 필요한 라이브러리들이 존재하는 것을 알 수 있고 오른쪽 부분에는 react와 관련된 라이브러리가 있음을 볼 수 있다. 그리고 제일 오른쪽의 파란색 부분은 우리가 구현한 컴포넌트가 들어 있음을 알 수 있다. 

 

그래서 리액트에서는 필요할 때만 불러와 코드를 Splitting 하는 방법을 제공한다. 

 

ko.reactjs.org/docs/code-splitting.html

코드 분할 – React

 

1. 동적 import

import { add } from './math';

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

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

 

2. React.lazy

// Before
import OtherComponent from './OtherComponent';

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

이건 추가로 Route를 기반으로 Router안에서 나누어 주는 것을 의미한다. 

 

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

<Suspense fallback={<div>Loading...</div>}>
   <Switch>
     <Route exact path="/" component={Home}/>
     <Route path="/about" component={About}/>
   </Switch>
</Suspense>

 

여기서 <Suspense>를 볼 수 있는데 <Route>를 동적으로 컴포넌트를 가져오는데 가져오기 전까지 fallback 파라미터를 사용해서 Loading  화면을 동적으로 가져올 때까지 보여줄 수 있다. 

 

<Suspense>가 만약에 없다면 동적으로 나오기 전에 바로 Route가 나오기 때문에 에러가 발생한다.

 

리액트의 lazy를 사용해서 코드 스플리팅했을 때의 결과물이다. 이전에 정적이게 다 받아오던 라이브러리 들 중 리액트와 관련된 코드들이 스플릿되어 파일이 나누어 진 것으로 알 수 있다. 그래서 파란색 오른쪽의 부분은 splitting되어서 필요할 때 가져오겠다는 의미가 된다. 

 

 

네트워크 탭 확인해보기

 

Before

After

위의 파일과 다르게 분산된 js 파일들이 함께 로드된 것을 알 수 있다.