Code Splitting

ELI5 — The Vibe Check

Instead of sending the user one massive JavaScript file for your entire app, code splitting lets you break it into chunks and only send what's needed for the current page. Why make someone download your admin dashboard code when they're just reading a blog post?

Real Talk

Code splitting is a bundler feature that divides the application bundle into smaller chunks loaded on demand or in parallel. This reduces initial load time by deferring non-critical code. It is commonly implemented via dynamic imports, route-based splitting in frameworks like Next.js, and React's lazy/Suspense.

Show Me The Code

// Dynamic import = code splitting point
const AdminPanel = React.lazy(() => import('./AdminPanel'))

function App() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <AdminPanel />
    </React.Suspense>
  )
}

When You'll Hear This

Code splitting cut our initial bundle from 800KB to 200KB.,Route-level code splitting is built into Next.js automatically.,Use code splitting for heavy components users rarely open.