Code Splitting

Code Splitting is a performance optimization technique supported by bundlers like Webpack, Rollup, and Vite.

Instead of downloading an entire application as a single, massive bundle.js file, code splitting allows you to divide the code into smaller chunks. The browser only downloads the chunks necessary to render the current page, and requests additional chunks on-demand as the user navigates or interacts with the application.

Why is Code Splitting Important?

As your React app grows, so does your bundle size. If you include third-party libraries (like Lodash, Moment.js, or Chart.js), your bundle.js can easily exceed several megabytes.

Downloading, parsing, and compiling a massive JavaScript file takes time, especially on mobile networks or slower devices. This leads to a slow Time to Interactive (TTI), resulting in a poor user experience. Code splitting fixes this by ensuring the user only downloads the code they actually need right now.

How Code Splitting Works

Code splitting is achieved through Dynamic Imports.

A static import is bundled immediately:

// Bundler says: "Include this in the main bundle!"
import { add } from './math.js';
console.log(add(16, 26));

A dynamic import uses the import() syntax, which returns a Promise. When the bundler sees this, it creates a separate file for math.js.

// Bundler says: "Put this in a separate chunk, fetch it when this line runs."
import('./math.js').then(math => {
  console.log(math.add(16, 26));
});

Types of Code Splitting in React

1. Route-Based Code Splitting

This is the most impactful type of code splitting. You split your application at the page level. If a user visits the /login route, they shouldn’t download the code for the /dashboard route.

In a standard React App, this is done using React.lazy and a router (like React Router):

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

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

const App = () => (
  <BrowserRouter>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </BrowserRouter>
);

2. Component-Based Code Splitting

You can split heavy components that are conditionally rendered. For example, a heavy Modal, a complex Graph, or a Rich Text Editor that only appears when a user clicks a specific button. (See the Component Splitting topic for details).

3. Vendor Splitting (Library Splitting)

Bundlers can automatically split third-party libraries (code from node_modules) into a separate chunk (often called vendor.js). Because you rarely change your dependencies, this chunk can be cached by the browser for a very long time, speeding up subsequent visits to your site even if your application code changes. Modern bundlers usually do this automatically.

Interview Questions

Q: What is Code Splitting?
A: Code splitting is the process of breaking a massive JavaScript bundle (e.g., a 5MB main.js file) into smaller, logical chunks that can be loaded lazily on demand. This significantly improves the initial page load time and Time to Interactive (TTI).