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

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.