[19장] 코드 스플리팅

쉽게말해 파일을 분리하는 작업을 코드 스플리팅이라고 한다(code spliting)

 

자바스크립트로 애플리케이션을 개발하게 되면, 기본적으로는 하나의 파일에 모든 로직들이 들어가게 된다. 리액트도 비슷한 맥락으로 npm run build로 웹팩을 통한 배포용 파일을 만드는데, CRA 기본 웹팩 설정에 SplitChunks라는 기능덕분에 적당히 분리가 되긴 하지만 내가 직접 짠 코드들은 하나의 파일에 대부분 담기게 된다.

 

이처럼 당장에 필요하지 않은 컴포넌트일지라도 불필요하게 한 파일에 담기게 되면서 파일 용량도 커지고, 페이지 로딩 속도도 느려진다. 그리고 이러한 문제를 해결하고자 나온 것이 코드 비동기 로딩이다.

 

1. React.lazy & Suspense

리액트 v16.6 부터 도입된 유틸 함수로 컴포넌트를 쉽게 스플리팅해준다.

2. Loadable Components

코드 스플리팅을 도와주는 서드파티 라이브러리. 여러 기능이 있는데 중요한 점은 서버 사이드 렌더링을 지원한다는 것이다. SSR이 뭔지는 바로 뒤에서 배워보기로 하고, 사용법은 React.lazy와 비슷하되 Suspense를 사용할 필요가 없다는 정도이다.

1) fallback

만약 Suspense의 fallback기능, 그러니까 로딩 중에 보여 주고 싶은 UI가 있다면 아래와 같이 loadable 부분을 수정하면 된다.

const Split = loadable( () => import('./Split'), {
    fallback: <div>로딩중</div>
});

2) preload (미리 불러오기)

말그대로 컴포넌트를 미리 불러오는 기능으로, 당장에 렌더링할건 아니라도 필요에 의해 준비를 원한다면 쓸 수 있다.

이 외에도 타임아웃, 로딩 UI딜레이 등등 기능이 겁나 많긴 하다.