Code Splitting

Code splitting is a build technique that divides application JavaScript into several chunks instead of one large file. The first load fetches only the code for the current route, and other chunks are requested when needed.

Why it matters

Less JavaScript up front means faster download, parsing and execution, improving FCP, TBT and INP. Splitting also helps caching: a stable vendor chunk stays cached while the app chunk changes with each deploy. Common split points are routes, rarely used features (a chart or editor) and heavy libraries.

Example

A dynamic import() tells the bundler to create a separate chunk:

button.addEventListener('click', async () => {
  const { renderChart } = await import('./chart.js');
  renderChart(data);
});

In React, React.lazy(() => import('./Settings')) splits a component, and frameworks like Next.js split by route automatically. You can also prefetch the chunk when the user hovers over the button.

Common mistakes

• Splitting too finely, creating many small requests with waterfall delays.
• Lazy loading something needed for the first render, adding a delay.
• No loading state, so the interface appears frozen while a chunk downloads.
• Not preloading the chunk for the next likely step.

Related

• Bundler
• Tree shaking
• JavaScript bundle size
• Prefetch

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.