사용자에게 필요한 것보다 더 많은 코드를 제공할 필요가 없으므로 동적 가져오기를 통해 번들을 분할하여 제공할 수 있는 방법이다.
import React, { lazy } from 'react';
const AvatarComponent = lazy(() => import('./AvatarComponent'));
const DetailsComponent = () => (
<div>
<AvatarComponent />
</div>
)
React.lazy를 사용하지 않으면 모든 파일이 첫 페이지를 로드하는 즉시 대규모 단일 JavaScript 번들이 사용자에게 전송된다. 이는 페이지 성능에 상당한 영향을 줄 수 있다.
이 React.lazy는 Suspense 구성 요소와 결합하여 로드 상태를 처리해줄 수 있다.
- 경로 수준에서 시작.
경로는 분할할 수 있는 애플리케이션의 지점을 식별하는 가장 간단한 방법입니다. React 문서에 Suspense를 react-router와 함께 사용하는 방법이 설명되어 있습니다.- 특정 사용자 상호작용(예: 버튼 클릭)에서만 렌더링되는 사이트 페이지의 큰 구성요소를 식별합니다. 이러한 구성 요소를 분할하면 JavaScript 페이로드가 최소화됩니다.
- 화면 밖에 있고 사용자에게 중요하지 않은 것은 모두 분할하는 것을 고려하십시오.
네트워크를 통해 코드 분할 구성 요소(lazy로 불러오거나 api 등으로 불러오는 특정 코드 분할 부분)를 가져올 때 사용자가 경험해야 하는 약간의 지연이 항상 있으므로 유용한 로드 상태를 표시하는 것이 중요하다. Suspense 구성 요소와 함께 React.lazy를 사용하면 이 문제를 해결하는 데 도움이 된다.
import React, { lazy, Suspense } from 'react';
const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));
const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));
const renderLoader = () => <p>Loading</p>;
const DetailsComponent = () => (
<Suspense fallback={renderLoader()}>
<AvatarComponent />
<InfoComponent />
<MoreInfoComponent />
</Suspense>
)
위와 같은 경우 Suspense가 사용하지 않았다면 각각의 컴포넌트들이 차례로 로딩되는 문제인 엇갈린 로딩이 발생하기 쉽다. 이로 인해 사용자 경험이 down
React는 서버 측에서 렌더링될 때 Suspense를 지원하지 않아 서버에서 렌더링하는 경우 React 문서에서 권장하는 loadable-components와 같은 다른 라이브러리를 사용하는 것이 좋다.