Reduce JavaScript Bundle Size to Fix INP

# Webpack Bundle Analyzer
npm install --save-dev webpack-bundle-analyzer
# Add to webpack.config.js:
# const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
# plugins: [new BundleAnalyzerPlugin()]

# Next.js Bundle Analyzer
npm install @next/bundle-analyzer
# next.config.js:
# const withBundleAnalyzer = require('@next/bundle-analyzer')({
#   enabled: process.env.ANALYZE === 'true',
# });
# module.exports = withBundleAnalyzer(nextConfig);
ANALYZE=true npm run build

# Vite: rollup-plugin-visualizer
npm install --save-dev rollup-plugin-visualizer
# vite.config.js:
# import { visualizer } from 'rollup-plugin-visualizer';
# plugins: [visualizer({ open: true })]

# Source-map-explorer (works with any bundler)
npm install --save-dev source-map-explorer
npx source-map-explorer dist/assets/*.js

# Check installed package sizes
npx package-size lodash moment date-fns dayjs

# Common bloated packages and their lightweight alternatives:
# moment (300KB)    -> date-fns (12KB) or dayjs (2KB)
# lodash (72KB)     -> lodash-es (tree-shakeable) or native JS
# axios (13KB)      -> fetch API (0KB, built-in)
# uuid (7KB)        -> crypto.randomUUID() (0KB, built-in)
# classnames (1KB)  -> clsx (0.5KB) or template literals (0KB)
# numeral (62KB)    -> Intl.NumberFormat (0KB, built-in)

import { lazy, Suspense } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// Each route loads its own JS bundle on demand
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const Analytics = lazy(() => import('./pages/Analytics'));

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <Suspense fallback={<PageSkeleton />}>
        <Home />
      </Suspense>
    ),
  },
  {
    path: '/dashboard',
    element: (
      <Suspense fallback={<PageSkeleton />}>
        <Dashboard />
      </Suspense>
    ),
  },
  {
    path: '/settings',
    element: (
      <Suspense fallback={<PageSkeleton />}>
        <Settings />
      </Suspense>
    ),
  },
  {
    path: '/analytics',
    element: (
      <Suspense fallback={<PageSkeleton />}>
        <Analytics />
      </Suspense>
    ),
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

import { lazy, Suspense, useState } from 'react';

// Heavy components loaded on demand
const RichTextEditor = lazy(() => import('./components/RichTextEditor'));
const ChartLibrary = lazy(() => import('./components/Charts'));
const PDFViewer = lazy(() => import('./components/PDFViewer'));

function Dashboard() {
  const [showEditor, setShowEditor] = useState(false);

  return (
    <main>
      {/* Critical content loads immediately */}
      <h1>Dashboard</h1>
      <MetricsSummary />

      {/* Chart loads when scrolled into view */}
      <Suspense fallback={<div className="chart-skeleton" />}>
        <LazyVisible>
          <ChartLibrary data={chartData} />
        </LazyVisible>
      </Suspense>

      {/* Editor loads only on button click */}
      <button onClick={() => setShowEditor(true)}>
        Open Editor
      </button>
      {showEditor && (
        <Suspense fallback={<div className="editor-skeleton" />}>
          <RichTextEditor />
        </Suspense>
      )}
    </main>
  );
}

// Helper: renders children only when visible in viewport
function LazyVisible({ children }) {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin: '200px' }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return <div ref={ref}>{isVisible ? children : null}</div>;
}

// BAD: imports entire library (72KB for lodash)
import _ from 'lodash';
const sorted = _.sortBy(items, 'name');

// GOOD: imports only what you use (4KB)
import sortBy from 'lodash-es/sortBy';
const sorted = sortBy(items, 'name');

// BEST: use native JavaScript (0KB)
const sorted = [...items].sort((a, b) =>
  a.name.localeCompare(b.name)
);

// BAD: barrel imports pull in everything
import { Button, Modal, DatePicker } from '@ui/components';
// If you only use Button, Modal and DatePicker code
// is still bundled

// GOOD: direct imports enable tree shaking
import { Button } from '@ui/components/Button';

{
  "name": "my-app",
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.ts"
  ]
}

// Setting sideEffects tells the bundler which files
// have side effects (code that runs on import).
// Files NOT listed can be safely tree-shaken.
// This is CRITICAL for libraries -- without it,
// the bundler assumes all imports have side effects
// and cannot remove unused code.

// The modern approach: scheduler.yield()
// Gives the browser a chance to handle pending interactions
async function processLargeDataset(items: Item[]) {
  const results = [];

  for (let i = 0; i < items.length; i++) {
    results.push(processItem(items[i]));

    // Yield every 5ms of work to keep INP responsive
    if (i % 50 === 0) {
      // scheduler.yield() (Chrome 129+) or fallback
      if ('scheduler' in globalThis && 'yield' in scheduler) {
        await scheduler.yield();
      } else {
        await new Promise(resolve => setTimeout(resolve, 0));
      }
    }
  }

  return results;
}

// For event handlers specifically:
button.addEventListener('click', async () => {
  // Show immediate visual feedback FIRST
  button.classList.add('loading');
  button.disabled = true;

  // Yield so the browser can paint the loading state
  await scheduler.yield?.() ??
    new Promise(r => setTimeout(r, 0));

  // Now do the heavy work
  const result = await processExpensiveOperation();

  // Update UI with results
  updateDashboard(result);
  button.classList.remove('loading');
  button.disabled = false;
});