728x90
반응형
* 코드 스플리팅 하는 이유 : 현재 필요한 파일만 다운받기 위함
▼ 코드 스플리팅을 위한 라이브러리 (lazy) ▼
lazy – React
The library for web and native user interfaces
react.dev
1. lazy + Suspense
> MarkdownPreview = 컴포넌트명
> 웹팩이라는 모듈번들러가 별도의 chunk 파일로 만들어겠다!
> JS엔진이 위에서부터 아래로 읽다가 lazy 이 부분은 나중에 다운로드함
> MarkdownPreview 컴포넌트를 만났을때, 다운로드 함
> 다운받는 동안은 fallback에서 Loading 컴포넌트를 보여줌
끝.
반응형
'TIL :: Today I Learned' 카테고리의 다른 글
| 리액트 최적화 (3) 폰트 : FOIT | FOUT | Subsets | Preload (0) | 2024.03.01 |
|---|---|
| 리액트(CRA) 최적화(2) Lazy-Loading | Preload | CLS 제거 (2) | 2024.03.01 |
| 망고 프로젝트 : useInfiniteQuery + Optimistic Update (React Profiler를 사용하여 성능 측정) (0) | 2024.02.18 |
| 리액트 최적화(1) 이미지 : Format + cloudinary (0) | 2024.02.13 |
| useEffect의 dependency array에서 무한루프 (0) | 2024.02.06 |