Lazy import

 

React로 만드는 Single Page App의 특징은 html, js 파일이 하나만 생성된다.

그 안에 모든 내용을 다 넣게되면 파일사이즈가 좀 크고 , 첫 페이지 로딩속도가 매우 느리다.

해결방법으로는 js 파일을 잘게 쪼개면 되는데

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


//위의 코드를 아래와 같이 수정

import {lazy, Suspense, useEffect, useState} from 'react'

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

이렇게 바꾸게 되면 필요한 경우 import 하게 된다. (위 코드는 일단 무조건 import)

<Suspense> </Suspense> 를 이용해 컴포넌트를 감싸면 컴포넌트가 로딩중일 때 대신 보여줄 html 도 작성 가능하다.

(Suspense import 필요)