[React] lazy import

lazy import 

 

리액트로 만드는 Single Page Application의 특징은 빌드 시 html, js 파일이 하나만 생성된다. 그 안에 지금까지 만든 모든 내용이 들어있어 파일 사이즈가 약간 크다. 이런 이유에서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있다. 

 

 

이를 개선하기 위해 코드를 분할할 수 있다.

import 할 컴포넌트가 바로 렌더링 되지 않을 때, 컴포넌트가 처음 렌더링 될 때(필요할 때)까지 import를 미루는 것이다.

 

 

 

import MarkdownPreview from './MarkdownPreview.js';

위 코드를 아래와 같이 바꿀 수 있다.

import { lazy } from 'react'

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

컴포넌트가 필요해지면 import 하는 방식이다.

lazy import를 하면 앱의 코드를 분할한다. 이를 통해 첫 페이지 로딩속도를 향상시킬 수 있다. 

 

React.lazy()는 import를 반환하는 콜백 함수를 인자로 받는다.

동적으로 불러오는 컴포넌트 파일은 반드시 리액트 컴포넌트를 포함해야 하고, export default를 가져야 한다.

 

 

 

 

Suspense

<Suspense fallback={<Loading />}>
  <h2>Preview</h2>
  <MarkdownPreview />
 </Suspense>

Suspense를 import 해오고 컴포넌트를 감싸면, 컴포넌트가 로딩중일 때 대신 보여줄 html 작성도 가능하다. 

 

 

 

 

Router와 함께 사용하기

return (
   <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element=<About/>} />
      </Routes>
    </Suspense>
  </Router>
);

Router와 함께 사용할 때는 Router 바로 아래에 Suspense를 두고 그 밑에 Routes로 보여줄 컴포넌트를 lazy import로 불러오도록 한다.

 

 

* lazy import를 컴포넌트 내부에서 사용하지 말 것. 최상위 모듈(ex. App.js)에서만 사용해야 한다. 

 

 

 

References

https://react.dev/reference/react/lazy

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