본 문서는 김민준 님의 저서인 '리액트를 다루는 기술'를 참고하였습니다

🎭 [코드 스플리팅]

리액트 프로젝트를 사용자에게 제공할 때는 빌드 작업을 거쳐서 배포를 함

빌드 작업 시 동작에 불필요한 주석, 공백 등을 제거하여 크기를 최소화
브라우저에서 JSX 문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스 파일 진행

이러한 빌드 작업은 웹팩 이라는 도구가 담당함

별도의 설정을 하지 않으면 프로젝트의 모든 자바스크립트 파일이 하나로 합쳐짐
즉, 사용자는 초기 로딩을 위해 모든 구성요소 자바스크립트를 가져오기 때문에 쓰지 않는 기능들로 인해 로딩이 길어짐

CRA로 프로젝트를 빌드할 경우 최소 두 개 이상의 자바스크립티 파일이 생성됨

CRA의 기본 웹팩 설정에는 SplitChunks 라는 기능이 적용됨
SplitChunks는 node_moudles에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파일을 자동으로 분리
캐싱의 효과를 효율적으로 만듬

이와같이 파일을 분리하는 작업을 코드 스플리팅이라고 함 다만 SplitChunks의 기능을 통한 코드 스플리팅은 단순히 효율적인 캐싱 효과만 보유

당장 사용하지 않는 컴포넌트의 분리를 위해 코드 비동기 로딩이 존재함

코드 비동기 로딩을 통해 자바스크립트 함수, 객체, 혹은 컴포넌트를 필요한 시점에 불러와 사용 가능

본 문서에서는 코드 비동기 로딩 방법으로 3가지를 설명함

자바스크립트 함수 비동기 로딩
React.lazy와 Suspense를 통한 컴포넌트 비동기 렌더링
Loadable Components를 통한 컴포넌트 비동기 렌더링

☝ [자바스크립트 함수 비동기 로딩]

자바스크립트에서 다른 파일에 함수를 가져올 때 우리는 import를 사용한다. 이 import 된 파일들은 빌드시에 하나로 합쳐지는데, 자바스크립트에서 이를 분리하고자 한다면 단순히 import를 상단에서 하지 않고 import() 함수 형태로 메서드 안에서 사용하면, 파일을 따로 분리시켜서 저장한다.

// old 버전!
import take from './take'

function app() {
  const onclick = () => {
    take()
  }
}

// new 버전!

function app() {
  const onclick = () => {
    import('./take').then((result) => take().defualt())
  }
}

참고로 import를 함수로 사용하면 Promise를 반환한다. 이 방식을 통해 모듈을 불러올 때, 모듈에서 default로 내보낸 것은 result.default를 참조해야 사용 할 수 있다.

✌ [React.lazy와 Suspense 방식]

코드 스플리팅을 위해 리액트 16.6 버전부터 내장된 기능이다. 이전 버전에서는 import 함수를 통해 불러오고 컴포넌트 자체를 state에 넣는 방식으로 구현을 했었다.

React.lazy는 컴포넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 있게 해 주는 유틸 함수로 사용방법은 다음과 같다.

const SplitMe = React.lazy(() => import('./SplitMe'))

Suspense는 리액트 내장 컴포넌트로서 코드 스플리팅 된 컴포넌트를 로딩하도록 발동 시킬 수 있고, 로딩이 끝나지 않았을 때 보여 줄 UI를 설정 가능하며 사용방법은 다음과 같다.

import { Suspense } from 'react'
;<Suspense fallback={<div>loading...</div>}>
  <SplitMe />
</Suspense>

🖖 [Loadable Components 방식]

Loadable Components는 서드파티 라이브러리이며 서버 사이드 렌더링을 지원하는 이점이 있다. 또한 렌더링 이전에 필요할 때 스플리팅 된 파일을 미리 불러오는 기능이 존재한다. 다만 본 자료에서는 서버 사이드 렌더링을 제외한 기본적인 사용법만 소개할 예정이다.

라이브러리 설치가 필요하며 명령어는 다음과 같다. yarn add @loadable/component 사용법은 React.lazy와 비슷하지만 Suspense를 사용할 필요 없다.

import loadable from '@loadable/component'
const SplitMe = loadable(() => import('./SplitMe'))

//본인의 처리하는 코드 등...
;<SplitMe />

단순히 선언 부에서 loadable을 사용하고 <SplitMe />와 같이 원하는 위치에 사용하기만 해도 코드 스플리트가 적용된다. 만약 로딩 중에 다른 UI를 보여주고 싶다면 loadable 사용 부분에 추가 인자를 넘겨주면 된다.

const SplitMe = loadable(() => import('./SplitMe'), {
  fallback: <div>loading...</div>,
})

컴포넌트를 미리 불러오는 방법은 .preload(); 함수를 호출하는 것이다. 다음 예제는 특정 요소에 이벤트를 주어, 마우스를 올리면 로딩을 시작하고, 클릭 시 보여주는 방식이다.

import loadable from '@loadable/component';
const SplitMe = loadable(() => import('./SplitMe'), {
  fallback: <div>loading...</div>
});

function app() {
  const [visible, setVisible] = useState(false);
  const onClick = () {
    setVisible(true);
  };
  const onMouseOver = () {
  	SplitMe.preload();
  };
  return (
    <div onClick={onClick} onMouseOver={onMouseOver}>
      {visible && <SplitMe />}
    </div>
  )
}

Loadable Components는 미리 불러오는 기능 외에도 타임아웃, 로딩 UI 딜레이, 서버 사이드 렌더링 호환 등 다양한 기능을 제공한다. 다만 React.lazy의 대체제가 아니며 공식 문서에서도 React.lazy를 활용해 스플리팅이 잘 되면 Loadable Components로 바꿀 필요가 없다고 한다. 만약 SSR(서버 사이드 렌더링)이 필요하고, React.lazy에 기능이 제한적이라고 느껴진다면 도입을 고려할만 하다. 링크

[React.lazy VS LoadAble Components 비교 테이블]

라이브러리	Suspense	SSR	라이브러리 스플리팅	import(`./${value}`)
React.lazy	✅	❌	❌	❌
@loadable/component	✅	✅	✅	✅

🤙 [정리]

두 방법 다 코드 스플리팅이 주 기능이기 때문에 서버 사이드 렌더링 유무에 따라 선택을 해도 좋다. 내 경우에는 대부분의 프로젝트에서는 추가 라이브러리 대신 React 자체적으로 지원하는 lazy 방식을 택하고, 서버 사이드 렌더링이 필요한 경우에는 Loadable Components를 활용할 예정이다.