[React] Loadable-components로 코드 스플리팅 하기

웹이나 앱의 규모가 커지게 되면 번들(webpack이나 parcel 같은 것들)의 크기도 커지는데, 번들이 당장 사용하지 않는 컴포넌트 정보를 다 불러오게 된다면 분명 서비스하는데 문제가 생기게 된다.

 

이 문제를 해결하기 위해 사용하는게 코드 스플리팅이다. 필요하지 않은 코드를 불러오지 않는 것, 번들을 나눠서 성능을 향상시키는 방법이다.

 

코드 스플리팅을 하나하나 구현 해줄수도 있지만 만약 서버 사이드 렌더링을 할거라면 코드 스플리팅을 적용하기 상당히 까다로워진다. 왜냐하면 첫번째로 서버 사이드 렌더링에서는 리렌더링이란게 없기 때문에 state를 변화를 감지해서 화면을 바꿔주지 않기 때문이고 두 번째로 JavaScript가 로딩 될 때 스플리팅된 코드가 아직 로딩되어있지 않아 null 이 렌더링되면서 기존에 보여줬었던게 사라지며 생기는 페이지 깜빡임 현상이다.

 

이러한 문제를 쉽게 해결하기 위해 서버 사이드 렌더링을 지원하는 코드 스플리팅 라이브러리 Loadable components를 사용한다.

 

npm i @loadable/component

Loadable component는 렌더링 하기 전에 필요할 때 분할된 파일을 미리 불러올 수 있는 기능도 있다.

 

사용방법은 아래와 같다.

import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'))

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

 

 

https://github.com/gregberge/loadable-components

Loadable-components 깃허브

https://velog.io/@velopert/react-code-splitting

코드 스플리팅에 대한 자세한 부분은 이 블로그를 참고했다.