Lazy Import

React로 구성된 웹페이지는 빌드시 하나의 js파일로 통합되는데, 이 때문에 첫 페이지 로딩 속도가 느려지는 문제가 있을 수 있다.

메인 페이지에서 import 되는 component중 처음 로딩 시점부터 필요하지 않은 component가 import되는 경우도 있는데, 해당 component들을 lazy import되도록 구성하면 js파일도 분할되고, 첫 페이지 로딩 시점에 import하지 않기 때문에 로딩 속도가 개선된다.

---

예제

// 기존 import 문장
//import ComponentName from './pages/ComponentName.js'

// lazy import로 구성한 문장
// lazy, Suspense 사용을 위해 import
import { lazy, Suspense } from 'react'
const ComponentName = lazy(() => import('./pages/ComponentName.js')

function App.js() {
  return (
     ...
     {/* lazy import 된 component를 호출하는 부분을 Suspense component로 감싸준다. */}
     {/* fallback은 해당 Component를 불러오는 중 아무런 내용을 보여줄 수 없을 경우에 보여줄 내용을 기입한다. */}
     <Suspense fallback={<div>Page Loading...</div>}>
       <ComponentName/>
     </Suspense>
     ...
  )
}