Claude Code के साथ Bundle Analysis और Optimization

Bundle Analysis से App को Lightweight बनाएं

JavaScript bundle का बढ़ना page load speed पर directly impact करता है। Claude Code का उपयोग करके, bundle analysis से optimization implementation तक efficiently आगे बढ़ सकते हैं।

Bundle Size Visualize करना

> Bundle size analyze करो और optimize करने वाली dependencies identify करो।
> Treemap से visualize करने की setting भी add करो।

// vite.config.ts
import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      filename: 'dist/bundle-stats.html',
      open: true,
      gzipSize: true,
      brotliSize: true,
      template: 'treemap',
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          router: ['react-router-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
        },
      },
    },
  },
});

Bundle Size Auto-Check

// scripts/check-bundle-size.ts
import { readFileSync, readdirSync, statSync } from 'fs';
import path from 'path';
import { gzipSync, brotliCompressSync } from 'zlib';

interface BundleReport {
  file: string;
  raw: number;
  gzip: number;
  brotli: number;
}

function analyzeBundles(dir: string): BundleReport[] {
  const files = readdirSync(dir, { recursive: true }) as string[];
  
  return files
    .filter(f => /\.(js|css)$/.test(f))
    .map(file => {
      const filePath = path.join(dir, file);
      const content = readFileSync(filePath);
      return {
        file,
        raw: content.length,
        gzip: gzipSync(content).length,
        brotli: brotliCompressSync(content).length,
      };
    })
    .sort((a, b) => b.gzip - a.gzip);
}

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes}B`;
  return `${(bytes / 1024).toFixed(1)}kB`;
}

const reports = analyzeBundles('dist/assets');
console.log('\nBundle Size Report\n');
console.log('File | Raw | Gzip | Brotli');
console.log('--- | --- | --- | ---');

let totalGzip = 0;
for (const r of reports) {
  totalGzip += r.gzip;
  console.log(`${r.file} | ${formatSize(r.raw)} | ${formatSize(r.gzip)} | ${formatSize(r.brotli)}`);
}

console.log(`\nTotal (gzip): ${formatSize(totalGzip)}`);

// Size limit check
const LIMIT = 200 * 1024; // 200kB
if (totalGzip > LIMIT) {
  console.error(`\nBundle size limit (${formatSize(LIMIT)}) exceed हो गई है!`);
  process.exit(1);
}

Heavy Dependencies Identify और Replace करना

> बड़ी dependencies को lightweight alternatives से replace करने का suggestion दो।

// Common replacement patterns
const replacements = {
  // moment.js (300kB) → dayjs (2kB)
  'moment': 'dayjs',
  
  // lodash (70kB) → lodash-es (tree-shaking support)
  'lodash': 'lodash-es',
  
  // axios (13kB) → fetch API (built-in)
  'axios': 'native fetch',

  // uuid (3.5kB) → crypto.randomUUID() (built-in)
  'uuid': 'crypto.randomUUID()',
};

// lodash individual import
// ❌ import _ from 'lodash';
// ✅ import debounce from 'lodash-es/debounce';

Dynamic Import से Code Splitting

// Route-based splitting
const routes = [
  {
    path: '/dashboard',
    component: lazy(() => import('./pages/Dashboard')),
  },
  {
    path: '/settings',
    component: lazy(() => import('./pages/Settings')),
  },
];

// Conditional import
async function loadEditor() {
  const { EditorModule } = await import('./modules/heavy-editor');
  return new EditorModule();
}

// Library lazy loading
async function highlightCode(code: string, lang: string) {
  const { highlight } = await import('prismjs');
  return highlight(code, lang);
}

CI/CD में Bundle Size Monitoring

# .github/workflows/bundle-check.yml
name: Bundle Size Check
on: [pull_request]

jobs:
  bundle-size:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - run: npx tsx scripts/check-bundle-size.ts
      - uses: actions/upload-artifact@v4
        with:
          name: bundle-report
          path: dist/bundle-stats.html

Summary

Bundle analysis और optimization tree shaking से closely related है। Claude Code का उपयोग करके, dependency analysis से lightweight alternatives में replace करने तक efficiently implement किया जा सकता है। CI/CD में bundle size check incorporate करके performance degradation prevent किया जा सकता है। Vite build optimization के बारे में Vite Official Documentation देखें।