Analisis Bundle dan Optimasi dengan Claude Code

Meringankan Aplikasi dengan Analisis Bundle

Membengkaknya bundle JavaScript berdampak langsung pada kecepatan pemuatan halaman. Dengan Claude Code, kamu bisa maju secara efisien dari analisis bundle hingga implementasi optimasi.

Memvisualisasikan Ukuran Bundle

> Analisis ukuran bundle dan identifikasi dependensi yang perlu dioptimalkan.
> Tambahkan juga pengaturan untuk memvisualisasikan dengan 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'],
        },
      },
    },
  },
});

Pengecekan Otomatis Ukuran 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('\nLaporan Ukuran Bundle\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)}`);

// Pengecekan batas ukuran
const LIMIT = 200 * 1024; // 200kB
if (totalGzip > LIMIT) {
  console.error(`\nUkuran bundle melebihi batas (${formatSize(LIMIT)})!`);
  process.exit(1);
}

Mengidentifikasi dan Mengganti Dependensi Berat

> Berikan saran untuk mengganti dependensi besar dengan alternatif yang lebih ringan.

// Pola penggantian umum
const replacements = {
  // moment.js (300kB) → dayjs (2kB)
  'moment': 'dayjs',
  
  // lodash (70kB) → lodash-es (dukungan tree-shaking)
  'lodash': 'lodash-es',
  
  // axios (13kB) → fetch API (bawaan)
  'axios': 'native fetch',

  // uuid (3.5kB) → crypto.randomUUID() (bawaan)
  'uuid': 'crypto.randomUUID()',
};

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

Code Splitting dengan Dynamic Import

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

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

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

Monitoring Ukuran Bundle di 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

Analisis bundle dan optimasi terkait erat dengan tree shaking. Dengan Claude Code, mulai dari analisis dependensi hingga penggantian dengan alternatif ringan bisa dilakukan secara efisien. Dengan mengintegrasikan pengecekan ukuran bundle ke CI/CD, degradasi performa bisa dicegah. Tentang optimasi build Vite, lihat Dokumentasi Resmi Vite.