Code Splitting and Route-Level Performance Budgets

Code Splitting and Route-Level Budgets

Code splitting breaks a large JavaScript bundle into smaller chunks that are loaded on demand. This is essential for meeting performance budgets in complex applications — instead of loading all code upfront, you load only what the current page needs.

Route-Level Budget Strategy

Instead of a single global JS budget, set budgets per route:

Route	Shared	Route-Specific	Total
/home	120 KB	60 KB	180 KB
/product/:id	120 KB	100 KB	220 KB
/cart	120 KB	80 KB	200 KB
/checkout	120 KB	150 KB	270 KB
/account	120 KB	90 KB	210 KB

The "shared" chunk contains the framework, router, and common components.

Chunk Budget Guidelines

Chunk Type	Budget
Shared/vendor	100-150 KB
Route chunk	50-150 KB
Lazy component	20-50 KB
Third-party	Per-script

Implementation Strategies

Dynamic imports — Split at route boundaries:

const ProductPage = lazy(() => import('./pages/ProductPage'));

Vendor splitting — Separate stable vendor code from frequently changing app code for better caching

Component-level splitting — Lazy load heavy components:

const ChartLibrary = lazy(() => import('./components/Chart'));
const RichTextEditor = lazy(() => import('./components/Editor'));

Tracking in the Budget Tracker

Add each significant chunk as a separate resource entry:

• vendor.chunk.js — Shared vendor libraries
• app.chunk.js — Application framework code
• home.chunk.js — Home page route code
• product.chunk.js — Product page route code

Common Pitfalls

1. Over-splitting — Too many tiny chunks increase request overhead
2. Shared chunk bloat — One large import in shared code inflates every route
3. Waterfall loading — Nested dynamic imports create serial loading chains
4. Missing prefetching — Code-split routes should be prefetched on link hover