Bundle Size Optimization — Reduce Total JavaScript Payload

Bundle Size Optimization

Minification is one part of the bundle size story. True optimization requires a combination of techniques that reduce the amount of code you ship, the amount you load upfront, and the amount the browser must parse.

Analyzing Your Bundle

Before optimizing, you need to know what is in your bundle:

• webpack-bundle-analyzer — Visual treemap of bundle contents
• source-map-explorer — Analyzes source maps to show file-level contributions
• npx vite-bundle-visualizer — For Vite projects
• Bundlephobia — Check package size before installing

A common discovery: a single large dependency (moment.js, lodash, chart library) can account for 30-50% of the total bundle.

Tree Shaking

Tree shaking eliminates unused exports. For it to work effectively:

// Good: named imports allow tree shaking
import { debounce } from 'lodash-es';

// Bad: default import pulls in the entire library
import _ from 'lodash';

Ensure your dependencies publish ES modules ("module" field in package.json). CommonJS modules cannot be tree-shaken effectively.

Code Splitting

Split your bundle into smaller chunks loaded on demand:

// Route-based splitting (React)
const Dashboard = React.lazy(() => import('./Dashboard'));

// Feature-based splitting
const ChartLibrary = () => import('chart.js');

This reduces the initial JavaScript payload to only what is needed for the current page.

Dependency Optimization

1. Replace heavy libraries with lighter alternatives:

   • moment.js (300KB) with dayjs (2KB) or date-fns (tree-shakeable)
   • lodash (72KB) with lodash-es (tree-shakeable) or native methods
   • uuid with crypto.randomUUID() (built-in)

2. Audit dependencies regularly:

   npx depcheck          # Find unused dependencies
   npx npm-check-updates  # Check for updates
   

3. Use externals for libraries loaded from CDN.

Lazy Loading Non-Critical Code

Defer loading of non-critical features:

• Analytics scripts (defer or load after interaction)
• Chat widgets (load on scroll or click)
• Below-the-fold components (intersection observer)
• Polyfills (conditional loading based on feature detection)

Setting a Performance Budget

Establish size limits and enforce them in CI:

{
  "budgets": [
    { "type": "initial-js", "maximumWarning": "150kb", "maximumError": "250kb" },
    { "type": "initial-css", "maximumWarning": "30kb", "maximumError": "50kb" }
  ]
}

webpack, Lighthouse, and bundlesize can enforce these limits automatically.