[React.js] 성능개선 1 : lazy import

 

❗ lazy import

리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있는데 그게 싫다면 js 파일을 잘게 쪼개면 된다.

쪼개는 방법은 import 문법을 약간 고치면 되는데 지금 페이지에서 사용하지 않고 있는 컴포넌트들은 lazy import 해놓으면 좋다.

 

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

// lazy import 적용 전
import Detail from './routes/Detail.js'
import Cart from './routes/Cart.js'

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

 

lazy 문법으로도 똑같이 import가 가능한데 이 경우엔

"Detail 컴포넌트가 필요해지면 import 해주세요" 라는 뜻이 된다. 

그리고 이렇게 해놓으면 Detail 컴포넌트 내용을 다른 js 파일로 쪼개준다.

그래서 첫 페이지 로딩속도를 향상시킬 수 있다.

 

하지만 lazy import를 적용한 컴포넌트가 담긴 페이지에 진입 시 컴포넌트 로딩 시간이 발생한다는 단점도 있다.

---

❗ Suspense

lazy 사용하면 당연히 Detail 컴포넌트 로드까지 지연시간이 발생할 때 어떠한 대처가 필요할 것이다.

그럴 땐 Suspense를 사용하면 된다.

Suspense 사용 방법으로는

Suspense를 import 하고 Suspense를 적용하고자 하는 컴포넌트를 감싸면

감싸진 컴포넌트가 로딩중일 때 대체 화면을 보여줄 수 있다.

대체 화면은 알아서 디자인 하면 된다 !

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

해당 코드처럼 일부 컴포넌트만 감싸도 되고

<Suspense fallback={ <div>로딩중임</div> }>
  <Routes>
  </Routes>
</Suspense>

Routes안에 있는 컴포넌트들은 메인화면에서 렌더링 되지 않아도 되기때문에

Routes안에 있는 모든 컴포넌트에 Suspense를 적용을 해도 괜찮다.