[React] lazy import

리액트로 서비스를 개발한 후 npm run build를 통해 발행하면
하나의 큰 html, js, css 파일이 만들어지는데,
이때 하나의 js 파일에 지금까지 개발한 컴포넌트들이 다 들어가게 된다.

 

그러다 보니 이 js 파일은 사이즈가 매우 커서
메인 페이지에 접속하게 되면 로딩 속도가 느려진다.

 

이때 lazy를 사용해 js 파일을 나눌 수 있다.

메인 페이지에서 보이지 않는 컴포넌트를 import 할 때
lazy를 사용한 방식으로 import 하면 된다.

 

// (App.js)

import Detail from './routes/Detail.js'
import Cart from './routes/Cart.js'

// (App.js)
import {lazy, Suspense} from 'react'

const Detail = lazy(() => import('./routes/Detail.js'))
const Cart = lazy(() => import('./routes/Cart.js'))

lazy 문법을 사용해 컴포넌트를 import 하면,
import 안에 작성된 경로의 파일이 필요해지면 해당 컴포넌트를 import 해준다.

 

이런 식으로 import 한 컴포넌트는 다른 js 파일로 나눠지기 때문에
첫 페이지 로딩 속도를 향상시킬 수 있다.

 

그리고 lazy를 사용해 import 한 컴포넌트 로드까지 지연시간이 발생할 수 있는데,
이때 Suspense를 사용하여 해당 컴포넌트를 감싸 이 컴포넌트가 로딩 중일 때 
보여줄 컴포넌트를 작성할 수 있다.

<Suspense fallback={<div>로딩 중</div>}>
  <Detail shoes={shoes}/>
</Suspense>

---

참고자료

코딩애플 [React 리액트 기초부터 쇼핑몰 프로젝트까지! - 성능개선 1 : 개발자도구 & lazy import]