코드 스플리팅

번들을 여러 개로 나눠서 필요할 때 로드하는 것입니다.

코드 스플리팅 없이

모든 코드 → 하나의 번들 (bundle.js, 5MB)

사용자가 첫 페이지 접속
→ 5MB 전부 다운로드
→ 느린 초기 로딩

코드 스플리팅 적용

코드 → 여러 번들로 분리
- main.js (500KB) ← 초기 로딩
- admin.js (1MB) ← 관리자 페이지 접근 시
- chart.js (2MB) ← 차트 페이지 접근 시

사용자가 첫 페이지 접속
→ 500KB만 다운로드
→ 빠른 초기 로딩

React에서 사용

import React, { lazy, Suspense } from 'react';

// 동적 import
const AdminPage = lazy(() => import('./AdminPage'));
const ChartPage = lazy(() => import('./ChartPage'));

function App() {
    return (
        <Suspense fallback={<div>로딩...</div>}>
            <Routes>
                <Route path="/admin" element={<AdminPage />} />
                <Route path="/chart" element={<ChartPage />} />
            </Routes>
        </Suspense>
    );
}

/admin 접근할 때 AdminPage 코드를 다운로드합니다.

정리