Code Splitting

Introduction

By default, a bundler like Vite or webpack packages your entire application into one large JavaScript file. As an app grows — more pages, more features, more third-party libraries — that single bundle keeps growing too, and users end up downloading code for pages they may never visit before they can see anything at all.

Code splitting solves this by breaking the bundle into smaller chunks that load only when needed, rather than all at once. You already saw one piece of this in the earlier Lazy Loading lesson — this lesson zooms out to the bigger picture of code splitting as a strategy.

What is Code Splitting?

Code splitting is the practice of dividing your application's JavaScript into multiple smaller files ("chunks") instead of one giant bundle, and loading each chunk only when it is actually needed — typically when the user navigates to a page or opens a feature that requires it.

This is a build-tool-level concept: Vite, webpack, and other modern bundlers can automatically split code at certain boundaries, most commonly wherever your code uses a dynamic import() call instead of a static import at the top of a file.

React.lazy and Dynamic import()

The main React-specific mechanism for code splitting is React.lazy(), combined with JavaScript's dynamic import() syntax. Instead of importing a component at the top of the file (which bundles it into the main chunk), you defer the import until the component is actually about to render.

import Settings from "./Settings";

function App() {
  return <Settings />;
}

import { lazy, Suspense } from "react";

const Settings = lazy(() => import("./Settings"));

function App() {
  return (
    <Suspense fallback={<p>Loading settings...</p>}>
      <Settings />
    </Suspense>
  );
}

main.js         (App shell, does NOT include Settings code)
Settings-a1b2.js  (separate chunk, downloaded only when <Settings /> renders)

Route-Based Code Splitting

The most common and highest-impact place to apply code splitting is at the route level. Each page in your app (Home, Dashboard, Settings, Profile) becomes its own chunk, loaded only when the user actually navigates to that route. Users typically only visit one or two pages per session, so there is little reason to ship every page's code upfront.

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

const Home = lazy(() => import("./pages/Home"));
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));

function App() {
  return (
    <Suspense fallback={<p>Loading page...</p>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

With this setup, a first-time visitor landing on the home page only downloads the Home chunk (plus the shared app shell) — Dashboard.js and Settings.js are not fetched until the user actually navigates there.

Checking Bundle Size with Vite

When you build a Vite project for production, it prints a summary of every generated chunk and its size, so you can quickly see whether code splitting is actually working.

npm run build

dist/assets/index-4f8a2c.js       142.35 kB │ gzip: 45.11 kB
dist/assets/Dashboard-9d1e6b.js    38.92 kB │ gzip: 12.04 kB
dist/assets/Settings-77bf3a.js     21.60 kB │ gzip:  7.32 kB
dist/assets/Home-1a3c9f.js         9.84 kB │ gzip:  3.15 kB

Why This Matters for Performance

Every kilobyte of JavaScript the browser downloads has to be fetched, parsed, and executed before the page becomes interactive. A large, un-split bundle delays this for every single visitor, even those who only ever look at one page of your app.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Code splitting lets you ship only the JavaScript a user actually needs for the page they are on, using React.lazy() and dynamic import() to defer loading the rest. Route-based splitting is the most common way to apply this, and Vite's build output makes it easy to confirm the chunks are being created as expected.

Next, you will move into working with data from the outside world, starting with the browser's built-in Fetch API for loading data into a component.