Code Splitting은 번들을 여러 chunk로 나눠 초기 로드 JS를 줄이고, 필요할 때만 추가 로드합니다.

🧭 방식

• Route-based: 페이지/라우트마다 chunk (Next.js 기본)
• Component-based: React.lazy + Suspense
• Dynamic import: import('./heavy') → separate chunk

const Chart = lazy(() => import('./Chart'));

function Dashboard() {
  return (
    <Suspense fallback={<Spinner />}>
      <Chart />
    </Suspense>
  );
}

🚀 Next.js

• next/dynamic — SSR off, loading component
• App Router: route segment 자동 split
• analyze: @next/bundle-analyzer

🎯 split 후보

• admin, editor, chart, map 등 진입 빈도 낮은 heavy UI
• modal, tab lazy content
• locale별 큰 dictionary

⚠️ 주의

• 과도한 split → HTTP 요청 수 증가 (HTTP/2 mitigates)
• waterfall: prefetch, parallel import
• Suspense boundary UX (loading skeleton)

🔗 참고 자료

• webpack Code Splitting — 동적 import와 splitChunks로 번들을 나누는 공식 가이드다.
• web.dev: Reduce JavaScript payloads with code splitting — 코드 스플리팅으로 JS 페이로드를 줄이는 방법을 설명한다.
• Next.js Lazy Loading — next/dynamic과 라우트 단위 지연 로딩을 다룬다.
• MDN: import() — 동적 import() 문법과 동작을 정리한다.