Análise e Otimização de Bundle com Claude Code

Otimizando o App através da Análise de Bundle

Bundles JavaScript inchados afetam diretamente a velocidade de carregamento da página. Com o Claude Code, você pode avançar eficientemente desde a análise de bundle até a implementação de medidas de otimização.

Visualizando o Tamanho do Bundle

> Analise o tamanho do bundle e identifique dependências que devem ser otimizadas.
> Adicione também visualização em 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'],
        },
      },
    },
  },
});

Verificação Automática do Tamanho do 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('\nRelatório de tamanho do bundle\n');
console.log('Arquivo | 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)}`);

// Verificação de limite de tamanho
const LIMIT = 200 * 1024; // 200kB
if (totalGzip > LIMIT) {
  console.error(`\nTamanho do bundle excede o limite (${formatSize(LIMIT)})!`);
  process.exit(1);
}

Identificando e Substituindo Dependências Pesadas

> Sugira alternativas mais leves para dependências grandes.

// Padrões comuns de substituição
const replacements = {
  // moment.js (300kB) -> dayjs (2kB)
  'moment': 'dayjs',
  
  // lodash (70kB) -> lodash-es (compatível com tree-shaking)
  'lodash': 'lodash-es',
  
  // axios (13kB) -> fetch API (integrado)
  'axios': 'fetch nativo',

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

// Import individual do lodash
// Errado: import _ from 'lodash';
// Correto: import debounce from 'lodash-es/debounce';

Code-Splitting com Imports Dinâmicos

// Splitting baseado em rotas
const routes = [
  {
    path: '/dashboard',
    component: lazy(() => import('./pages/Dashboard')),
  },
  {
    path: '/settings',
    component: lazy(() => import('./pages/Settings')),
  },
];

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

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

Monitoramento de Tamanho de Bundle no 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

Resumo

Análise e otimização de bundle estão intimamente relacionadas com tree-shaking. Com o Claude Code, você pode avançar eficientemente desde a análise de dependências até a substituição por alternativas mais leves. Incorporando verificações de tamanho de bundle no CI/CD, você pode prevenir degradação de performance antecipadamente. Para otimização de build do Vite, consulte a documentação oficial do Vite.