Route-level code splitting: load only the code a page needs

Route-level code splitting splits the bundle into one file per page, so a first visit downloads only the code it needs. The build of this site emits 48 JavaScript files, yet the home page asks for one.

One dynamic import per route

import { lazy, Suspense } from "react";

const Components = lazy(() => import("./pages/Components"));
const Blocks = lazy(() => import("./pages/Blocks"));

export function Routes({ tab }) {
  return (
    Loading}>
      {tab === "components" ?  : }
    
  );
}

Each import() creates a split point: Vite emits one file for a module reached only from that point. Code shared by several routes lands in the common chunk, not duplicated in each one.

Four ways to split

Where the gain shows

The entry does not shrink: it stays at 141,302 bytes because React and the router live there. The gain sits in the chunks the home page never requests: Blocks weighs 22,130 bytes and arrives only when you open that page. On a single home visit the saving is the sum of the chunks you skip.

The command

npx vite build --mode production

The output lists every file with its size in kB and writes client/dist. Add --sourcemap when you need to see which module ends up in which chunk.

The limitation

Build sizes are not transferred bytes: 48 files exist on disk, and one visit downloads a few of them. Splitting too finely creates extra round trips on deep routes, and a duplicated chunk costs more than the entry you tried to avoid. Read the requests in the Network panel, not the dist folder.

Where to continue

The EneUI catalogue indexes 111,985 components and 1,556 blocks with previews. The record sidebar is a component made of several files: import it statically and it lands in the entry. For the weight of one import read an import that grows the bundle, for compression Brotli versus gzip, for the measured comparison the weight of UI libraries, and for the CSS that blocks the paint critical CSS.