---
title: "Code splitting"
slug: "code-splitting"
category: "glossary"
tags: ["glossary", "frontend", "performance", "bundling", "lazy-loading", "react"]
status: "stable"
last_updated: 2026-05-14
summary: "Code splitting divides a JavaScript bundle into smaller chunks that are loaded on demand, reducing the initial payload and improving time-to-interactive."
related:
  [
    "[[frontend/react]]",
    "[[frontend/nextjs]]",
    "[[frontend/astro]]",
    "[[glossary/tree-shaking]]",
    "[[glossary/suspense-boundary]]",
    "[[glossary/hydration]]",
  ]
---

## Overview

This page is the atomic definition. Bundling configuration lives at [[frontend/nextjs]].

## Definition

Code splitting divides a JavaScript application into multiple chunks instead of shipping one large bundle. The browser downloads only the chunk required for the current page or interaction; remaining chunks are loaded on demand. Webpack, Rollup, Vite, and esbuild all implement code splitting via dynamic `import()`. React uses `React.lazy()` paired with `<Suspense>` to split at the component level. Next.js splits automatically at the route level and also supports per-component splitting with `next/dynamic`. Benefits: smaller initial parse time, faster Time to Interactive (TTI), and better cache granularity because vendor chunks do not bust when app code changes. The trade-off is a waterfall of requests if splitting boundaries are too granular.

## When it applies

Use code splitting for any bundle over ~150 KB (compressed). Split at route boundaries first, then at component boundaries for large off-screen features such as modals, charts, or rich editors. Avoid splitting tiny components; the request overhead exceeds the savings.

## Example

```jsx
// Without splitting: the chart ships on every page.
import ChartEditor from "./ChartEditor"

// With splitting: ChartEditor loads only when the user opens it.
const ChartEditor = React.lazy(() => import("./ChartEditor"))

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <ChartEditor />
    </Suspense>
  )
}
```

## Related concepts

- [[frontend/react]] - React.lazy and Suspense are the primary splitting API.
- [[frontend/nextjs]] - Next.js provides automatic route-level splitting.
- [[glossary/tree-shaking]] - the companion technique that removes dead code before splitting.
- [[glossary/suspense-boundary]] - required to render a fallback while a split chunk loads.
- [[glossary/hydration]] - split chunks must still hydrate client-side.

## Citing this term

> See [[glossary/code-splitting|Code splitting]] (llmbestpractices.com/glossary/code-splitting).

## Related

- [[frontend/react]]
- [[frontend/nextjs]]
- [[glossary/tree-shaking]]
- [[glossary/suspense-boundary]]
- [[glossary/hydration]]