Code Splitting - dynamic import, React.lazy(), Suspense

Code Splitting

유저의 브라우저가 파싱하는 웹페이지의 규모가 클 때, 로딩이 오래걸리지 않도록 하기 위해 개발자는 당장 필요한 정보를 우선순위로 로딩순서를 조정할 수 있다.

이를 잘 활용하면 아직 로딩중인 홈페이지더라도 티가 나지 않게 하여 좋은 UX(user experience)를 전달할 수 있다.

import() 구문 이용

만약 add함수의 크기가 방대해서 import하는데 오래걸린다면 add함수를 사용하기 전까지는 add를 import하지 않는것이 좋다.

사용 방법은 import를 함수형태로 사용한 후 돌아오는 promise에서 모듈을 실행하는 방식이다.

전
import { add } from './math';
console.log(add(2,3))

후
import('./math').then(math => {
    console.log(math.add(2,3));
    });

 

React.lazy()와 Suspense

주의  
아직 React.lazy 와 Suspense는 서버사이드렌더링을 할 수 없습니다.
서버에서 렌더링 된 앱에서 코드 분할을 하기 원한다면 Loadable Components를 추천합니다. 
이는 서버 사이드 렌더링과 번들 스플리팅에 대한 좋은 가이드입니다.

-리액트 공식문서-

 

React.lazy()

React.lazy() 는 동적 import()를 호출하는 함수를 인자로 가진다.
이 함수는 React 컴포넌트를 포함하며 default export를 가진 모듈로 결정되는 Promise로 반환해야 한다.

import React, { lazy } from 'react';

const NewPopup = lazy(()=>import('./views/NewPopup'));

const MainComponent = () => {
    <>
        <NewPopup/>
    </>
}

 

Suspense

Dynamic import를 할 때마다 새로운 데이터가 로딩되는 도중에 유저에게는 앱에서 코드가 비어있는 컴포넌트가 보인다.
이런일이 발생하지 않도록 로딩이 되는 중에 로딩화면과 같은 다른 컴포넌트를 보여주는것이 바람직하다.

이것을 React.lazy 와 Suspense 로 쉽게 관리할 수 있다.

import React, { lazy, Suspense } from 'react';

const NewPopup = lazy(() => import('./views/NewPopup'));
const AnotherComponent = lazy(() => import('./AnotherComponent'));

const loading = () => <p>Loading</p>;

const MainComponent = () => (
    <Suspense fallback = {loading()}>
        <NewPopup />
    </Suspense>
)

Suspense의 props인 fallback에는 로딩되는 동안 보여질 컴포넌트를 할당한다.

lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링된다.

하나의 Suspense로 여러 lazy컴포넌트를 감쌀 수도 있다.

 

---

참고자료 

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

https://medium.com/humanscape-tech/react%EC%97%90%EC%84%9C-%ED%95%B4%EB%B3%B4%EB%8A%94-%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%AC%ED%8C%85-code-splitting-56c9c7a1baa4

https://velog.io/@odini/Code-Splitting%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%BF%ED%8C%85

https://www.sarah-note.com/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9/posting2/