/**
 * Webpack Bundle Analyzer setup
 */
const webpackConfig = `
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html',
      openAnalyzer: false,
      generateStatsFile: true,
      statsFilename: 'bundle-stats.json',
    }),
  ],
};
`;

/**
 * Analyze bundle programmatically
 */
interface BundleStats {
  totalSize: number;
  modules: Array<{
    name: string;
    size: number;
    percentage: number;
  }>;
  largestModules: Array<{
    name: string;
    size: number;
  }>;
}

function analyzeBundleStats(statsFile: string): BundleStats {
  const stats = require(statsFile);
  const modules = stats.modules || [];

  const totalSize = modules.reduce(
    (sum: number, m: { size: number }) => sum + m.size,
    0
  );

  const sortedModules = modules
    .map((m: { name: string; size: number }) => ({
      name: m.name,
      size: m.size,
      percentage: (m.size / totalSize) * 100,
    }))
    .sort((a: { size: number }, b: { size: number }) => b.size - a.size);

  return {
    totalSize,
    modules: sortedModules,
    largestModules: sortedModules.slice(0, 10),
  };
}

/**
 * Common heavy dependencies and their lightweight alternatives
 */
interface DependencyAlternative {
  heavy: string;
  size: string;
  light: string;
  lightSize: string;
  savings: string;
}

const alternatives: DependencyAlternative[] = [
  {
    heavy: 'moment',
    size: '288 KB',
    light: 'date-fns',
    lightSize: '20 KB (tree-shakable)',
    savings: '93%',
  },
  {
    heavy: 'lodash',
    size: '72 KB',
    light: 'lodash-es (tree-shakable)',
    lightSize: '5-10 KB',
    savings: '85%',
  },
  {
    heavy: 'axios',
    size: '13 KB',
    light: 'native fetch',
    lightSize: '0 KB',
    savings: '100%',
  },
  {
    heavy: 'jquery',
    size: '87 KB',
    light: 'native DOM APIs',
    lightSize: '0 KB',
    savings: '100%',
  },
  {
    heavy: 'chart.js',
    size: '240 KB',
    light: 'recharts (React) or lightweight-charts',
    lightSize: '45 KB',
    savings: '81%',
  },
];

# Webpack Bundle Analyzer
npm install --save-dev webpack-bundle-analyzer
npx webpack --profile --json > stats.json
npx webpack-bundle-analyzer stats.json

# Rollup Plugin Visualizer
npm install --save-dev rollup-plugin-visualizer
npx rollup -c --plugin visualizer

# Next.js Bundle Analyzer
npm install --save-dev @next/bundle-analyzer
ANALYZE=true npm run build

# Vite Bundle Analyzer
npm install --save-dev rollup-plugin-visualizer
vite build --mode analyze

# Source Map Explorer
npm install --save-dev source-map-explorer
source-map-explorer dist/**/*.js

/**
 * CI/CD bundle size check
 */
interface BundleSizeConfig {
  maxSize: number;
  files: string[];
}

async function checkBundleSize(config: BundleSizeConfig): Promise<void> {
  const fs = await import('fs/promises');
  const path = await import('path');

  for (const file of config.files) {
    const stats = await fs.stat(file);
    const sizeKB = stats.size / 1024;

    console.log(`${path.basename(file)}: ${sizeKB.toFixed(2)} KB`);

    if (sizeKB > config.maxSize) {
      throw new Error(
        `Bundle size exceeded: ${sizeKB.toFixed(2)} KB > ${config.maxSize} KB`
      );
    }
  }

  console.log('✓ Bundle size check passed');
}

// Usage in CI
checkBundleSize({
  maxSize: 250, // KB
  files: ['dist/main.js', 'dist/vendor.js'],
}).catch((error) => {
  console.error(error);
  process.exit(1);
});

name: Bundle Size Check
on: [pull_request]
jobs:
  check-size:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: andresz1/size-limit-action@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

// Before: 288 KB
import moment from 'moment';
const date = moment().format('YYYY-MM-DD');

// After: 20 KB
import { format } from 'date-fns';
const date = format(new Date(), 'yyyy-MM-dd');

// Before: Imports entire library (72 KB)
import _ from 'lodash';
_.debounce(fn, 300);

// After: Import only needed function (5 KB)
import debounce from 'lodash-es/debounce';
debounce(fn, 300);

// Before: Everything in main bundle
import HeavyComponent from './HeavyComponent';

// After: Load on demand
const HeavyComponent = lazy(() => import('./HeavyComponent'));

# Find unused exports
npx ts-prune

# Remove unused dependencies
npx depcheck

{
  "name": "my-app",
  "bundlesize": [
    {
      "path": "./dist/main.js",
      "maxSize": "200 KB"
    },
    {
      "path": "./dist/vendor.js",
      "maxSize": "150 KB"
    },
    {
      "path": "./dist/**/*.css",
      "maxSize": "50 KB"
    }
  ]
}