# For Vite projects - install the visualizer plugin
npm install --save-dev rollup-plugin-visualizer

# For webpack projects
npm install --save-dev webpack-bundle-analyzer

// vite.config.js - add the visualizer plugin
import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      open: true,        // opens the report in your browser after build
      gzipSize: true,    // shows gzip-compressed size
      brotliSize: true,  // shows brotli-compressed size
    })
  ]
});

// Without code splitting - everything loads upfront
import { SettingsPage } from './pages/Settings';
import { DashboardPage } from './pages/Dashboard';
import { ProfilePage } from './pages/Profile';

// With React lazy + code splitting - each page loads on demand
import { lazy, Suspense } from 'react';

const SettingsPage = lazy(() => import('./pages/Settings'));
const DashboardPage = lazy(() => import('./pages/Dashboard'));
const ProfilePage = lazy(() => import('./pages/Profile'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/settings" element={<SettingsPage />} />
        <Route path="/dashboard" element={<DashboardPage />} />
        <Route path="/profile" element={<ProfilePage />} />
      </Routes>
    </Suspense>
  );
}

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

// The chart library is large (200KB). Only load it when the user opens the modal.
const AnalyticsChart = lazy(() => import('./components/AnalyticsChart'));

function Dashboard() {
  const [showChart, setShowChart] = useState(false);

  return (
    <div>
      <button onClick={() => setShowChart(true)}>View analytics</button>
      {showChart && (
        <Suspense fallback={<div>Loading chart...</div>}>
          <AnalyticsChart />
        </Suspense>
      )}
    </div>
  );
}

// utils.js - exports 5 functions
export function formatDate(date) { /* ... */ }
export function formatCurrency(amount) { /* ... */ }
export function slugify(text) { /* ... */ }
export function capitalize(text) { /* ... */ }
export function truncate(text, length) { /* ... */ }

// app.js - only imports 2
import { formatDate, formatCurrency } from './utils';

// After tree shaking: slugify, capitalize, and truncate are NOT in the bundle

// components/index.js (barrel file) - can hurt tree shaking
export { Button } from './Button';
export { Modal } from './Modal';       // Modal imports a large dependency
export { DataTable } from './DataTable'; // DataTable imports another large dep

// If you do this in your app:
import { Button } from './components';
// Some bundlers may include Modal and DataTable anyway

// Better: import directly from the source file
import { Button } from './components/Button';

// Instead of moment.js (230KB gzipped: 72KB)
import moment from 'moment';
const formatted = moment(date).format('MMMM D, YYYY');

// Use date-fns (tree-shakable, only pay for what you use)
import { format } from 'date-fns';
const formatted = format(date, 'MMMM d, yyyy');

// Or use the native Intl API (zero bundle cost)
const formatted = new Intl.DateTimeFormat('en-US', {
  year: 'numeric', month: 'long', day: 'numeric'
}).format(date);

// Instead of importing all of lodash (70KB)
import _ from 'lodash';
const result = _.groupBy(items, 'category');

// Import only the function you need (2KB)
import groupBy from 'lodash/groupBy';
const result = groupBy(items, 'category');

// Or use native Array methods (zero cost)
const result = items.reduce((acc, item) => {
  (acc[item.category] = acc[item.category] || []).push(item);
  return acc;
}, {});

LCP (Largest Contentful Paint) - target: < 2.5 seconds
  The time until the largest visible element is rendered.
  Large render-blocking scripts delay this.

INP (Interaction to Next Paint) - target: < 200ms
  How quickly the page responds to user interactions.
  Long JavaScript tasks block the main thread and hurt this.

CLS (Cumulative Layout Shift) - target: < 0.1
  How much the layout shifts unexpectedly.
  Less related to JS size, more to image dimensions and font loading.

<!-- Defer non-critical scripts to avoid blocking rendering -->
<script src="/analytics.js" defer></script>

<!-- Async scripts don't block HTML parsing -->
<script src="/chat-widget.js" async></script>

<!-- Preload critical resources the browser discovers late -->
<link rel="preload" href="/fonts/jetbrains-mono.woff2" as="font" crossorigin>