리액트로 개발이 다 끝나면 npm run build를 입력해서 코드들을 html,css,js파일로 변환해야한다.
근데 리액트는 Single Page Application의 특징을 갖고 있기에, html,js파일이 하나만 생성이된다.
한 파일에 모든 코드들이 다 쑤셔넣어지니 당연히 파일사이즈가 클 수 밖에 없다.
그래서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있다.
이런점을 개선하고 싶으면 import문법을 살짝 손보면 된다.
예를들어, 메인페이지에서 A라는 컴포넌트와 B라는 컴포넌트를 import 해서 쓰고 있을 때, 만약 A,B라는 컴포넌트가 메인페이지에서 전혀 보이지 않고 있기에 필요가 없으면?
(App.js)
import {lazy, Suspense, useEffect, useState} from 'react'
const A = lazy( () => import('./routes/A.js') )
const B = lazy( () => import('./routes/B.js') )이렇게 lazy import를 적용시켜주면 된다.
이러면 A라는 컴포넌트가 필요할 때 import해주고, A 컴포넌트 내용을 다른 js파일로 알아서 쪼개줌으로써, 첫 페이지 로딩속도를 향상시킬 수 있다.
lazy를 사용하면 당연히 A 컴포넌트 로드까지 지연시간이 발생할 수 있다.
그럴 땐
1. Suspense 라는거 import 해오고
- A 컴포넌트를 감싸면
A 컴포넌트가 로딩중일 때 대신 보여줄 html 작성도 가능하다.
<Suspense fallback={ <div>로딩중임</div> }>
<A shoes={shoes} />
</Suspense>근데 그냥 Routes 위에다가 Suspense를 전부 다 감싸는 게 괜찮을 거 같다.
ha lee :)