Code splitting using 'Loadable'

요약

code splitting은 서비스 출시 전에 꼭 챙겨야 하는 기술이다.
이걸 적용하지 않으면, 사용하지 않는 모든 페이지에 대한 코드를 다운로드하고, 페이지가 그려지기 때문에 처음 페이지 접속 시 유저가 오랫동안 기다려야 하기 때문이다. 물론 요즘 인터넷이 빨라서 참을 수 없을 만큼은 아니지만, 해당 기술을 적용하기 전과 후를 비교해보면 확실히 알 수 있을 것이다.

 

동작 방식

/home 에 접근시, 해당 페이지에서 꼭 필요한 파일들만 받아와서 페이지를 그려준다.
그리고 다른 path로 페이지 이동 시 해당 path에 필요한 파일을 추가로 받아 페이지를 그린다.

 

적용 위치

해당 기술은 SSR(Server Side Rendering)에서와 CSR(Client Side Rendering) 모두 적용이 가능하지만, 이 글에서는 CSR에서만 적용하는걸 보여주겠다. 
다음 글에서는 SSR에서 어떻게 하면 되는지 알려주겠다.

 

How to

너무 쉬워서 굳이 이 글을 적어도 되나 싶다.
이 기술을 적용하려면, 꼭 React Router Library를 사용하고 있어야 한다.

 

설치

npm install @loadable/component
# or use yarn 
yarn add @loadable/component 

# typescript 
npm i --save-dev @types/loadable__component

 

 

적용

import loadable from '@loadable/component'; 
const MemoEnd = loadable(() => import('./components/memo/MemoEnd')); 

<Route path={'/memo/:id'}> 
  <MemoEnd /> 
</Route>

 

마무리

이렇게 쉽게 적용해서 엄청나게 큰 효과를 가져다 주는 code split 기술이다.
네이버 메인 페이지를 보면 많은 기능과 UI들이 포함되어 있는데도, 엄청나게 빠르게 페이지가 로드되고 있다.
이런 최적화 기술이 기업의 실력이다. 우리도 할 수 있다!

 

참고

https://loadable-components.com/docs/getting-started/