Analyse et optimisation des bundles avec Claude Code

Reduire la taille de l’application grace a l’analyse des bundles

L’expansion des bundles JavaScript impacte directement la vitesse de chargement de la page. Avec Claude Code, vous pouvez progresser efficacement de l’analyse des bundles a l’implementation de mesures d’optimisation.

Visualisation de la taille du bundle

> Analyse la taille du bundle et identifie les dependances a optimiser.
> Ajoute aussi la configuration pour visualiser avec un treemap.

// 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'],
        },
      },
    },
  },
});

Verification automatique de la taille du bundle

// 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('\nRapport de taille du bundle\n');
console.log('Fichier | 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)}`);

// Verification de la limite de taille
const LIMIT = 200 * 1024; // 200kB
if (totalGzip > LIMIT) {
  console.error(`\nLa taille du bundle depasse la limite (${formatSize(LIMIT)}) !`);
  process.exit(1);
}

Identification et remplacement des dependances lourdes

> Suggere des remplacements de dependances lourdes par des alternatives legeres.

// Patterns de remplacement courants
const replacements = {
  // moment.js (300kB) -> dayjs (2kB)
  'moment': 'dayjs',
  
  // lodash (70kB) -> lodash-es (compatible tree-shaking)
  'lodash': 'lodash-es',
  
  // axios (13kB) -> fetch API (integre)
  'axios': 'native fetch',

  // uuid (3.5kB) -> crypto.randomUUID() (integre)
  'uuid': 'crypto.randomUUID()',
};

// Importation individuelle de lodash
// Non : import _ from 'lodash';
// Oui : import debounce from 'lodash-es/debounce';

Division de code avec les importations dynamiques

// Division basee sur les routes
const routes = [
  {
    path: '/dashboard',
    component: lazy(() => import('./pages/Dashboard')),
  },
  {
    path: '/settings',
    component: lazy(() => import('./pages/Settings')),
  },
];

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

// Chargement paresseux des bibliotheques
async function highlightCode(code: string, lang: string) {
  const { highlight } = await import('prismjs');
  return highlight(code, lang);
}

Surveillance de la taille du bundle en CI/CD

# .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

L’analyse et l’optimisation des bundles sont etroitement liees au tree shaking. Avec Claude Code, vous pouvez realiser efficacement l’analyse des dependances et leur remplacement par des alternatives legeres. Integrer la verification de la taille du bundle dans le CI/CD previent la degradation des performances. Pour l’optimisation du build Vite, consultez la documentation officielle de Vite.