Performance Budget

Bundle analysis, code splitting strategies, tree shaking, and monitoring.

Overview

Performance budgets help maintain fast load times as apps grow.

Key Concepts

• Bundle Analyzer — Visualize bundle composition
• Code Splitting — Load code on demand
• Tree Shaking — Remove unused exports
• Dynamic Imports — Lazy-load components and modules
• Performance Metrics — FCP, LCP, CLS, TTI

Code Examples

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

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

// Component-level splitting
function HeavyChart({ data }) {
  const Chart = useMemo(() => {
    if (!data.length) return null;
    return lazy(() => import('./HeavyChart'));
  }, [data.length]);

  if (!Chart) return <Placeholder />;
  
  return (
    <Suspense fallback={<ChartPlaceholder />}>
      <Chart data={data} />
    </Suspense>
  );
}

// webpack.config.js optimization
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 25,
      minSize: 20000
    }
  }
};

Practice

Analyze a React app's bundle and implement code splitting to reduce initial load by 40%.