성능개선(1) - lazy import

lazy import

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

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

- 단점 :  lazy문법으로 import한 컴포넌트들을 로드할 때는 로딩시간이 발생할 수 있다.

 

1. lazy()

(App.js)

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

↓↓↓

 

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

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

 

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

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

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

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

 

2. Suspense

lazy 사용하면 당연히 Detail 컴포넌트 로드까지 지연시간이 발생할 수 있다.

그럴 땐

1. Suspense 라는거 import 해오고

2. Detail 컴포넌트를 감싸면

Detail 컴포넌트가 로딩중일 때 대신 보여줄 html 작성도 가능하다. 

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

귀찮으면 <Suspense> 이걸로 <Routes> 전부 감싸도 된다.