JavaScript bundle size: the hidden performance tax

JavaScript is the most expensive byte you can ship to a browser. HTML and CSS are parsed and rendered incrementally. Images are decoded off the main thread. JavaScript, by contrast, must be downloaded, parsed, compiled, and executed on the main thread, blocking everything else. Every kilobyte of JavaScript has a cost that is multiple times higher than the same kilobyte of HTML or CSS.

Measure first

Before you can reduce your bundle size, you need to know what is in it. PagePulse parses every production build, attributes each byte to its source module, and tracks first-party and third-party JavaScript weight on every route. The breakdown is usually eye-opening.

The most common culprits are large utility libraries (moment.js, lodash), date libraries, polyfills for browsers you do not support, and third-party scripts (analytics, tag managers, chat widgets). In most apps, 80% of the bundle size comes from 20% of the dependencies.

Set a budget

A good rule of thumb is 175KB of gzipped JavaScript per route. That is enough for a modern framework, a router, and your application code, but not enough for bloat. Set the budget per route, not per site, because different routes have different needs.

PagePulse.setBudget({
  routes: {
    '/': { jsSizeKB: 150 },
    '/dashboard': { jsSizeKB: 250 },
    '/blog/[slug]': { jsSizeKB: 175 },
  },
});

Reduce

• 01Replace moment.js with date-fns or Temporal. Save 60KB+.
• 02Replace lodash with native ES modules. Save 25KB+.
• 03Use dynamic imports for routes and large components.
• 04Tree-shake aggressively. Audit your bundler output.
• 05Lazy-load third-party scripts. Defer analytics and tag managers.
• 06Drop polyfills for browsers you no longer support.

Enforce in CI

Once you have a budget, enforce it. The @pagepulse/ci package fails any pull request that breaches the budget. PagePulse posts a comment to the PR showing exactly which module added the weight, so the author can fix it before merge.

Bundle size discipline is one of the highest-ROI investments a frontend team can make. Every kilobyte you cut improves LCP, INP, and TTFB on every device, on every network, in every country. The compound effect over months is enormous.