React 최적화 lazy 적용

HyeokE·2022년 1월 23일
0

기존 사이트 퍼포먼스가 낮아서 최적화 방법을 고민했다.

그래서 찾은 것이 lazy
React.lazy는 동적 import()를 호출하는 함수를 인자로 가진다.
lazy는 Suspense 태그 아래 위치해야하며 Suspense는 lazy가 호출되는 동안 보여줄 예비 컨텐츠를 포함해야한다.

사이트에 적용할 때 이런 오류가 나왔는데
Type 'Promise<typeof import("/Users/jeongjunhyeok/react/gdsc-dju-web-ts/src/pages/Introduce/index")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.

라이브러리 사용하는 것을 제외하고 2가지 옵션이 있다.

첫번째로 export default [componentName]

두번째로

const Home = lazy(() =>
  import('./Home').then((module) => ({ default: module.Home })),
);

default를 지정해주는 방식이다.

<Suspense fallback={<GoogleSpinner />}>
        {alert.alertHandle && <Alert />}
        <Routes>
          <Route path={'/*'} element={<Pages />} />
          <Route path={'/main/*'} element={<Pages />} />
          <Route path={'/admin/*'} element={<Admin />} />
          <Route path={'/onboard/*'} element={<OnBoard />} />
          <Route path={'/auth/*'} element={<Auth />} />
        </Routes>
      </Suspense>
      ```
profile
멋진 프론트엔드 개발자.

0개의 댓글