리액트 공부하기 - 최적화 (번들링 Bundling, 코드 스플리팅 Splitting)

 1. 번들링(Bundling)이란?

번들링은 여러 개의 자바스크립트 파일, CSS 파일 등을 하나로 묶는 작업.

 

리액트 앱을 만들면 App.js, Header.js, Footer.js, style.css 등등 파일이 많은데, 브라우저가 다 따로따로 읽으면 느리고 비효율적이다.

그래서 개발 도구(Webpack, Vite 등)가 이걸 한 덩어리로 묶어준다. 이걸 **번들(bundle)**이라고 함.

📦 예: main.bundle.js ← 이 안에 모든 JS 코드가 들어가 있음.

왜 필요할까?

✓ http 요청 수 줄여서, 속도를 ↑↑

✓ 코드 압축 → 파일크기 ↓↓

✓ 사용 되지 않는 코드 제거해 → 최적화

 

 2. 코드 스플리팅(Code Splitting)이란?

 

필요할 때만 특정 코드를 불러오도록, 코드를 여러 덩어리로 나누는 작업.

왜 나눠요?

처음 앱을 켤 때 모든 코드를 다 불러오면 느려요.

✓ 초기 로딩 속도 개선

 

✨ Lazy, Suspense는 대표적인 코드 스플리팅이다.

 

// 일반적인 import (처음부터 다 로딩됨)
import AboutPage from './AboutPage';

// 코드 스플리팅 (필요할 때 로딩됨)
const AboutPage = React.lazy(() => import('./AboutPage'));