[React] 번들링과 코드스플리팅

번들링 (Bunding)

CSS나 JS파일 등 여러개의 파일을 하나의 파일로 합치는 것으로

큰 덩어리로 요청을 보내 효율적인 파일 로딩을 할 수 있다

 

번들링효과로는

• http 요청 수를 줄여 속도 향상
• 코드를 압축해 파일크기 축소
• 사용되지 않는 코드 제거해 최적화

 

npm run build

vite의 경우 위 명령어로 번들링할 수 있다

 

 

 

코드스플리팅 (Code Splitting)

번들링의 반대개념

애플리케이션의 코드를 여러개의 작은 부분으로 나누는 것으로

필요한 때에만 해당 파일을 빠르게 로드시킬 수 있다

 

• 초기 로딩 속도를 개선
• 불필요한 코드 로드 방지
• 데이터 비용 절감 효과

React.lazy와 Suspense를 사용하면, 컴포넌트를 동적으로 로드할 수 있다

기본적으로 컴포넌트를 분리하여 필요할 때만 로드하는 방식이다

 

 

 

React.lazy와 Suspense

lazy 

모든 컴포넌트를 바로 불러오지 않고, 실제로 그 컴포넌트가 필요할 때 불러와

초기 로딩 속도를 최적화할 수 있다

const MyComponent = React.lazy(() => import('./Main'));

 

import() 문법을 사용하여 컴포넌트를 동적으로 불러온다

 

 

Suspense 

컴포넌트를 불러오는 동안, 사용자에게 보여줄 임시 화면을 설정한다

대표적으로 로딩중... 이라는 텍스트가 있다

<Suspense fallback={<div>로딩 중...</div>}>
  <Main />
</Suspense>

 

Suspense는 fallback 속성에  보여줄 UI를 정의한다