Written by Parkdev
on January 25, 2024

[React]성능을 개선해보자 (Lazy import)

리엑트의 대표적인 성능 개선 태크닉 (Lazy import)

SPA의 특징은 다음과 같다.
- npm build를 발행하면
- js파일 하나에 모든 코드를 다 쑤셔 넣는다 = 사이즈가 매우 크다.
- 이러면 로딩속도가 느려질 수 밖에 없다.
- 이를 해결하려면 어떤방법을 써야할까?

사용자에 우선 보여줄것 보여준 이후 > 백그라운드에서 추가 로드를 진행하면된다!

이것이 Lazy import이다.

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

이러면 처음부터 불러오는것이아니라, **해당 페이지가 필요할때 **불러온다.
실제로 build시 별도의 Js파일로 분해되어 만들어지는 것을 확인할 수 있다.

단점

Lazy import한 component는 지연시간이 늘어난다.
이를 해결할 수 있는 방안 중에 하나로 Suspense를 쓸수있다.

Suspense는 로딩 화면을 꾸밀 수 있다.

//App.js

import { Suspense } from "react"

...
<Route path="/detail/:id" element={
	<Suspense fallback={<div>로딩중임</div>}>
		<Detail shoes={shoes}/>
    </Suspense>
} />

// 일반적으로 모든 Route컴포넌트를 Lazyload하기 때문에 Routes를 감싸도 무방하다

← → Top