[React] 기본 로딩(import), 지연 로딩(lazy)

 

 

✔ 기본 로딩 (기본 import 방식)

=> 앱이 시작할 때 무조건 미리 로딩 (코드를 다 읽어옴)

=> 유저가 해당 페이지를 누르지 않아도 이미 로딩이 된 상태

=> 단점: 앱이 커질 수록 초기 로딩 속도가 느려짐

import VacationSetting from '@/pages/setting/VacationSetting';

 

 

✔ 지연 로딩 (lazy loading 기능)

=> 페이지가 필요할 때까지 로딩하지 않음

=> 유저가 해당 페이지를 누르면 그때 코드를 가져옴

=> 장점: 초기 로딩 속도 빠름, 효율적

const VacationSetting = React.lazy(() => import('@/pages/setting/VacationSetting'));

<Suspense fallback={<Loading />}>
  <Route path="/vacation" element={<VacationSetting />} />
</Suspense>

 

위에서 lazy를 import 시키면 이렇게도 사용 가능

import React, { lazy } from 'react';

const VacationSetting = lazy(() => import('@/pages/setting/VacationSetting'));