LLM Best Practices

Code splitting

2 min read

View markdown source

Overview

This page is the atomic definition. Bundling configuration lives at 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

// 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>
  )
}
  • react - React.lazy and Suspense are the primary splitting API.
  • nextjs - Next.js provides automatic route-level splitting.
  • tree-shaking - the companion technique that removes dead code before splitting.
  • suspense-boundary - required to render a fallback while a split chunk loads.
  • hydration - split chunks must still hydrate client-side.

Citing this term

See Code splitting (llmbestpractices.com/glossary/code-splitting).

Graph View

Backlinks