JavaScript Budget for Single-Page Applications

JavaScript Budget for SPAs

JavaScript is typically the largest and most expensive asset category in a single-page application. Unlike images, which simply decode and display, JavaScript must be downloaded, parsed, compiled, and executed — each step consuming CPU time on the user's device.

Framework Baseline Costs

Before writing a single line of application code, your framework already consumes a portion of the JS budget:

Framework	Min Bundle (gzip)	With Router
React 18	~44 KB	~52 KB
Vue 3	~33 KB	~40 KB
Svelte	~2 KB	~5 KB
Angular 17	~60 KB	~70 KB
Preact	~4 KB	~8 KB
Solid.js	~7 KB	~12 KB

Recommended JS Budgets for SPAs

Budget Tier	JS Budget	Suitable For
Tight	150-200 KB	Simple CRUD apps, mobile-first
Moderate	200-300 KB	Feature-rich apps, desktop audience
Generous	300-400 KB	Complex dashboards, internal tools

These are transfer sizes (compressed). Uncompressed sizes will be 3-4x larger.

Code Splitting Strategy

A 400 KB total JS budget does not mean the initial load must be 400 KB. Code splitting lets you load only what the current route needs:

Initial bundle: 80-120 KB (framework + shared code + current route)
Route chunks: 20-60 KB each (loaded on navigation)
Vendor chunks: 30-80 KB (loaded when needed)

Tree Shaking Impact

Tree shaking removes unused code from your bundles. The impact varies by library:

• lodash — Importing import { debounce } from 'lodash-es' instead of import _ from 'lodash' saves ~70 KB
• moment.js (72 KB gzip) → date-fns (tree-shakeable, use only what you need)
• Material UI — Named imports can reduce bundle size by 50%+

Monitoring JS Budget

• Use bundleanalyzer to visualize what is in your bundle
• Add size-limit or bundlesize to your CI pipeline
• Track the JS transfer size in your Lighthouse CI reports
• Set up alerts when JS size increases by more than 5 KB per PR