Bundle Optimization (Tree Shaking, Code Splitting) — System Design Interview Guide

Tree Shaking — Eliminating Dead Code

Tree shaking is the build-time elimination of exported-but-never-imported code. It relies on ES module static analysis — import/export statements are analyzable at build time; require() is not.

// math.js — only add is used by the app
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; } // never imported

// main.js
import { add } from './math';    // only add is included in the bundle
// multiply is tree-shaken out — never shipped to the browser

Common mistakes that break tree shaking:

• Importing the entire library: import _ from 'lodash' — use import { debounce } from 'lodash-es' instead (lodash-es uses ES modules)
• Side-effect imports: files that run code on import cannot be shaken. Mark your package as side-effect-free: "sideEffects": false in package.json
• CommonJS dependencies — CJS require() is not statically analyzable. Many older packages must be explicitly configured for tree shaking.

Code Splitting — Splitting One Bundle Into Many

Instead of shipping one huge JS file, code splitting produces multiple smaller chunks. The browser only downloads what it needs for the current page.

Route-Based Splitting (Most Impactful)

// React Router + dynamic import — each route is a separate chunk
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const Settings = React.lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

Vendor Splitting

Separate your code from third-party libraries. Your code changes on every deploy; React, lodash, etc. don't. Split them so users keep the vendor chunk cached while only redownloading your application code.

// Vite — manual chunks
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'],
        charts: ['recharts'],
      }
    }
  }
}

Dynamic Imports — Load on Demand

// Load a heavy library only when the user opens the modal
async function openChartModal() {
  const { Chart } = await import('chart.js'); // downloaded now, not at page load
  renderChart(Chart);
}

Dynamic imports are ideal for: rich text editors, charting libraries, PDF generators, anything large that isn't needed on initial load.

Analyzing Your Bundle

You can't optimize what you can't measure. Tools:

• webpack-bundle-analyzer — interactive treemap of what's in your bundle
• vite-bundle-visualizer — similar for Vite projects
• source-map-explorer — works on any build with source maps
• bundlephobia.com — check npm package size before installing