Analisis Bundle dengan Claude Code untuk Vite, Astro, dan Next.js

Bundle JavaScript jarang menjadi berat karena satu commit buruk. Biasanya ia membesar lewat perubahan yang masuk akal: grafik untuk admin, rich text editor, library tanggal, peta, video player, SDK autentikasi, atau kode A/B testing. Fitur itu mungkin memang perlu. Masalahnya muncul ketika semuanya dikirim pada first load kepada pengguna yang belum membutuhkannya.

Analisis bundle berarti membuka hasil production build dan memeriksa apa yang benar-benar dikirim ke browser. Untuk pemula, bayangkan menimbang koper lalu melihat barang mana yang paling berat. Claude Code bisa membantu membaca laporan, menemukan dependensi, mengubah kode, dan menulis CI. Tetapi tugasnya harus jelas: ukur dulu, jelaskan penyebab, buat perubahan kecil, verifikasi, lalu pasang budget.

Artikel ini membahas proyek Vite, Astro, dan Next.js-like. Kita akan memakai rollup-plugin-visualizer, source-map-explorer, pengecekan package duplikat, dynamic import, bundle budget di CI, dan workflow review Claude Code. Untuk konteks lanjutan, baca juga code splitting, tree shaking, dan performance optimization.

Workflow Dasar

Ukuran yang sering muncul adalah raw, gzip, dan brotli. Raw berguna untuk membaca diagram. Gzip dan brotli lebih dekat dengan transfer jaringan. Namun, package yang mudah dikompresi tetap bisa mahal saat parse dan execute.

flowchart LR
  A["production build"] --> B["visual report"]
  B --> C["duplicate packages"]
  C --> D["replace or dedupe"]
  B --> E["route-level split"]
  D --> F["bundle budget in CI"]
  E --> F
  F --> G["Claude Code review"]

Gunakan dokumentasi resmi sebagai acuan: Vite Building for Production, Astro Analyze bundle size, Next.js Package Bundling, web.dev Performance budgets 101, dan Claude Code overview.

Visualisasi Vite dan Astro

Untuk Vite, mulai dari rollup-plugin-visualizer. Plugin ini membuat HTML treemap agar package berat terlihat jelas.

npm install -D rollup-plugin-visualizer

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

export default defineConfig({
  plugins: [
    visualizer({
      filename: "dist/bundle-stats.html",
      template: "treemap",
      gzipSize: true,
      brotliSize: true,
      open: false
    })
  ],
  build: {
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-dom"],
          charts: ["recharts"],
          editor: ["@tiptap/react", "@tiptap/starter-kit"]
        }
      }
    }
  }
});

Untuk Astro, taruh di dalam konfigurasi vite:

// astro.config.mjs
import { defineConfig } from "astro/config";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  vite: {
    plugins: [
      visualizer({
        filename: "dist/bundle-stats.html",
        template: "treemap",
        gzipSize: true,
        brotliSize: true
      })
    ],
    build: { sourcemap: true }
  }
});

npm run build
open dist/bundle-stats.html

Di Windows PowerShell:

start dist/bundle-stats.html

Di laporan, cari kode yang tidak perlu pada tampilan awal: grafik admin, editor, peta, video player, pemroses Markdown, library tanggal besar, dan UI internal.

Source Map dan Next.js

source-map-explorer memakai file JS dan source map untuk menunjukkan asal isi bundle.

npm install -D source-map-explorer
npm run build
npx source-map-explorer "dist/assets/*.js" --html dist/source-map-report.html

Untuk Next.js, cek versi dan builder yang dipakai sebelum menyalin resep lama. Jika cocok, gunakan @next/bundle-analyzer.

// next.config.mjs
import bundleAnalyzer from "@next/bundle-analyzer";

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === "true"
});

export default withBundleAnalyzer({
  reactStrictMode: true
});

npm install -D @next/bundle-analyzer
ANALYZE=true npm run build

PowerShell:

$env:ANALYZE="true"; npm run build

Dependensi Duplikat

Library besar mudah terlihat, tetapi duplikat sering tersembunyi. Contohnya dua versi date-fns, penggunaan lodash dan lodash-es sekaligus, atau peer dependency yang tidak sejajar.

npm ls date-fns lodash lodash-es
npm dedupe

Dengan pnpm:

pnpm why date-fns
pnpm dedupe

Prompt yang lebih aman untuk Claude Code:

Analisis production bundle repository ini.
1. Daftar dependensi berat dari dist/bundle-stats.html atau source-map-explorer
2. Gunakan npm ls atau pnpm why untuk mencari package duplikat
3. Pisahkan kandidat menjadi replace, dedupe, dynamic import, dan remove
4. Pertahankan UI, teks SEO, CTA, dan event analytics yang ada
5. Buat perubahan terkecil yang aman, lalu jalankan npm run build dan bundle budget check

Penyebab	Perbaikan	Cek sebelum merge
moment masuk semua halaman	Intl.DateTimeFormat atau helper kecil	zona waktu dan bahasa
import penuh lodash	import per fungsi atau API native	campuran ESM/CommonJS
editor khusus admin	load setelah klik	loading dan error UI
chart di halaman utama	pisah ke halaman laporan	layout responsif
versi package duplikat	dedupe atau sejajarkan versi	peer dependency

dynamic import

dynamic import tidak menghapus kode. Ia memindahkan waktu load ke saat fitur dibutuhkan. Cocok untuk laporan admin, editor, peta, dan modal yang jarang dipakai.

// src/features/reports/ReportsButton.tsx
import { useState } from "react";

export function ReportsButton() {
  const [html, setHtml] = useState<string>("");
  const [loading, setLoading] = useState(false);

  async function handleClick() {
    setLoading(true);
    const { renderRevenueReport } = await import("./renderRevenueReport");
    setHtml(renderRevenueReport([12000, 18400, 9300]));
    setLoading(false);
  }

  return (
    <section>
      <button type="button" onClick={handleClick} disabled={loading}>
        {loading ? "Membuat laporan" : "Lihat laporan revenue"}
      </button>
      <output aria-live="polite">{html}</output>
    </section>
  );
}

// src/features/reports/renderRevenueReport.ts
export function renderRevenueReport(values: number[]): string {
  const total = values.reduce((sum, value) => sum + value, 0);
  return `Total bulan ini: ${new Intl.NumberFormat("id-ID").format(total)} IDR`;
}

Di Next.js, teks SEO, harga, link pembelian, dan CTA konsultasi sebaiknya tetap server-rendered. Tunda hanya UI editor yang berat.

// app/admin/EditorSlot.tsx
"use client";

import dynamic from "next/dynamic";

const RichEditor = dynamic(() => import("./RichEditor"), {
  ssr: false,
  loading: () => <p aria-live="polite">Memuat editor...</p>
});

export function EditorSlot() {
  return <RichEditor initialMarkdown="# Draft" />;
}

Budget di CI

Optimasi sekali tidak cukup. PR berikutnya bisa memasukkan dependensi besar lagi. CI budget membuat kenaikan ukuran harus dijelaskan.

// scripts/check-bundle-budget.mjs
import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
import path from "node:path";
import { brotliCompressSync, gzipSync } from "node:zlib";

const targetDir = "dist/assets";
const maxTotalGzip = 220 * 1024;
const maxSingleGzip = 140 * 1024;

function walk(dir) {
  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
    const fullPath = path.join(dir, entry.name);
    if (entry.isDirectory()) return walk(fullPath);
    return /\.(js|css)$/.test(entry.name) ? [fullPath] : [];
  });
}

if (!existsSync(targetDir)) {
  console.error(`Missing ${targetDir}. Run npm run build first.`);
  process.exit(1);
}

const rows = walk(targetDir).map((file) => {
  const content = readFileSync(file);
  return {
    file,
    raw: statSync(file).size,
    gzip: gzipSync(content).byteLength,
    brotli: brotliCompressSync(content).byteLength
  };
});

const totalGzip = rows.reduce((sum, row) => sum + row.gzip, 0);
const tooLarge = rows.filter((row) => row.gzip > maxSingleGzip);

if (totalGzip > maxTotalGzip || tooLarge.length > 0) {
  console.error(`Bundle budget failed. total gzip=${totalGzip} bytes`);
  process.exit(1);
}

console.log(`Bundle budget passed. total gzip=${totalGzip} bytes`);

# .github/workflows/bundle-budget.yml
name: Bundle Budget
on: [pull_request]
jobs:
  bundle-budget:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
      - run: node scripts/check-bundle-budget.mjs

Jangan mulai dari angka ideal. Ambil gzip saat ini, beri ruang sekitar 10%, lalu minta alasan ketika PR melewati batas.

Use Case Nyata

Pertama, dashboard SaaS. Daftar, pencarian, navigasi, dan CTA utama harus cepat muncul. Grafik admin, audit log, CSV export, dan billing report bisa dipisah.

Kedua, situs konten atau kursus. Body artikel, link pembelian, dan CTA konsultasi harus render lebih awal. Markdown preview, crop gambar, dan panel campaign bisa menunggu. Untuk melihat dampak bisnis, hubungkan dengan analytics implementation.

Ketiga, landing page dengan peta, video, kalkulator, atau form diagnosis. First view menampilkan penawaran, harga, bukti, dan tombol aksi. Widget berat load setelah scroll atau klik. Lihat juga video player dan accessibility.

Keempat, UI library internal. Import @company/ui bisa membawa DatePicker, Modal, Chart, dan icon pack meski halaman hanya memakai Button. Pisahkan exports dan tandai side effects CSS atau theme dengan jelas.

Kesalahan Umum

Jangan mengukur dev build. Jangan membagi setiap komponen menjadi chunk kecil. Jangan mempublikasikan source map tanpa kebijakan keamanan. Jangan membiarkan manualChunks tidak direview setelah dependensi berubah. Dan jangan hanya meminta Claude Code mengedit; minta juga review.

Review PR ini dari sudut bundle analysis.
- Apakah dependensi first load benar-benar perlu?
- Apakah ada versi package duplikat?
- Apakah dynamic import punya loading dan error state?
- Apakah teks SEO, harga, CTA, dan analytics tetap di luar chunk terlambat?
- Apakah log budget membantu menemukan penyebab?
- Ringkas npm run build dan path laporan yang dibuat.

Jalur Monetisasi

Analisis bundle bukan hanya kebersihan teknis. Jika first render lebih cepat, artikel, link produk, resource gratis, dan CTA konsultasi muncul lebih cepat. Untuk ClaudeCodeLab, ini memengaruhi iklan, penjualan template, dan permintaan training.

Untuk latihan pribadi, mulai dari cheat sheet gratis. Untuk prompt dan template siap pakai, lihat produk. Untuk tim yang perlu merapikan Vite, Astro, Next.js, CLAUDE.md, CI, dan aturan review, gunakan training dan konsultasi Claude Code.

Verifikasi Praktis

Contoh di artikel ini dicek terhadap struktur bergaya Vite/React: visualizer menulis laporan HTML, source-map-explorer membutuhkan source map, dan script budget hanya memakai fs, path, serta zlib. Pelajaran praktisnya adalah memisahkan konten first-load dari UI yang bisa ditunda. Editor dan grafik biasanya kandidat bagus; teks, harga, link pembelian, dan CTA konsultasi biasanya tidak.

Ringkasan

Workflow Claude Code yang kuat dimulai dari bukti: production build, visualisasi, cek duplikat, dynamic import, CI budget, dan review. Bundle analysis, tree shaking, dan code splitting adalah satu rutinitas untuk menjaga aplikasi tetap cepat saat traffic dan revenue bertambah.