What is Code Splitting?

Code splitting divides your JavaScript into smaller bundles that load only when needed. This reduces the initial download size and speeds up page loads.

Types of code splitting

Route-based splitting

Load code for each page separately:

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

Component-based splitting

Load components when they're needed:

const Chart = lazy(() => import('./Chart'));

Library splitting

Separate vendor code from application code.

Benefits of code splitting

• Smaller initial bundle size
• Faster initial page load
• Better caching (unchanged chunks stay cached)
• Load only what's needed

Implementing code splitting

React

import { lazy, Suspense } from 'react';
const Component = lazy(() => import('./Component'));

<Suspense fallback={<Loading />}>
  <Component />
</Suspense>

Dynamic imports

button.onclick = async () => {
  const module = await import('./heavy-module.js');
  module.doSomething();
};

Code splitting impact

Effective code splitting can:

• Reduce initial JS by 50%+
• Improve LCP and TTI
• Lower TBT