Cara Pakai Bundle Analyzer Next.js

Cara pakai Bundle Analyzer Next.js adalah menjalankan next experimental-analyze (butuh Next.js 16.1 atau lebih baru, plus Turbopack) untuk membuka treemap interaktif, memfilter modul berdasarkan rute/environment/tipe file, lalu mengklik modul besar untuk menelusuri import chain penyebabnya. Proyek yang masih memakai Webpack custom punya jalur terpisah lewat plugin @next/bundle-analyzer.

Ringkasan cepat:

1. next experimental-analyze adalah tool bawaan Next.js 16.1+ yang terintegrasi dengan module graph Turbopack, tanpa instalasi plugin tambahan.
2. Treemap-nya bisa difilter berdasarkan rute, environment (client/server), dan tipe aset (JavaScript, CSS, JSON), lalu diklik untuk melihat import chain lengkap.
3. Flag --output menulis hasil analisis ke .next/diagnostics/analyze sebagai file statis, berguna untuk dibandingkan sebelum/sesudah optimasi.
4. Proyek yang masih memakai fungsi webpack() custom (seperti situs ini sendiri, lihat catatan di bawah) perlu memakai plugin @next/bundle-analyzer versi Webpack sebagai gantinya.
5. Modul besar yang ditemukan biasanya diperbaiki lewat optimizePackageImports, memindahkan kerja berat ke Server Component, atau serverExternalPackages.

Apa Itu Next.js Bundle Analyzer?#

Next.js Bundle Analyzer adalah tool eksperimental yang diperkenalkan di Next.js 16.1 (18 Desember 2025), dirancang untuk menginspeksi ukuran bundle server dan client dengan presisi import tracing. Berbeda dari plugin @next/bundle-analyzer versi Webpack yang sudah ada lebih dulu, tool ini terintegrasi langsung ke dalam module graph Turbopack sehingga bisa menunjukkan rantai import lintas boundary Server Component ke Client Component, bukan cuma ukuran file mentah.

Next.js 16.1 includes a new experimental Bundle Analyzer that works with Turbopack. It makes it easier to optimize bundle sizes for both server and client code—helping improve Core Web Vitals, reduce lambda cold start times, and identify bloated dependencies.

(nextjs.org/blog/next-16-1)

Bagaimana Cara Menjalankan next experimental-analyze?#

Syaratnya proyek sudah di Next.js 16.1 atau lebih baru, dan memakai Turbopack (default sejak Next.js 16.0, lihat juga artikel cara mengaktifkan Turbopack untuk production build kalau proyek masih pakai config Webpack custom). Jalankan command berikut di root proyek:

npx next experimental-analyze

Command ini langsung membuka antarmuka treemap interaktif di browser, tanpa perlu menambahkan apa pun ke next.config.ts lebih dulu. Menurut dokumentasi resmi Next.js, command yang sama juga bisa dijalankan lewat yarn next experimental-analyze, pnpm next experimental-analyze, atau bunx next experimental-analyze, tergantung package manager yang dipakai proyek.

Bagaimana Cara Membaca Treemap dan Import Chain?#

Treemap menampilkan setiap modul sebagai kotak, dengan luas kotak merepresentasikan ukuran modul tersebut. Di dalam antarmukanya, modul bisa difilter berdasarkan rute (route tertentu di aplikasi), environment (client atau server), dan tipe aset (JavaScript, CSS, JSON), atau dicari langsung lewat nama file.

Mengklik satu modul menampilkan ukurannya secara presisi plus import chain lengkap, yaitu jalur lengkap dari entry point aplikasi sampai modul tersebut ikut dibundel, termasuk kalau modul itu melintasi boundary dari Server Component ke Client Component lewat import dinamis. Ini membantu menjawab pertanyaan "kenapa dependency ini ikut dibundel padahal saya tidak mengimpornya secara langsung", kasus yang sering terjadi pada library ikon atau utilitas yang diimpor lewat dependency lain.

Contoh Kasus yang Sering Terdeteksi#

Dua pola paling umum yang biasanya terlihat jelas di treemap: library ikon atau utilitas dengan ratusan named export yang ikut terbundel penuh padahal cuma dipakai sebagian kecil, dan library rendering berat (syntax highlighter, chart, parser markdown) yang ditempel di Client Component padahal hasil akhirnya cuma HTML statis.

Bagaimana Cara Menyimpan Hasil Analisis dengan --output?#

Untuk membandingkan ukuran bundle sebelum dan sesudah optimasi, lewati antarmuka interaktif dan simpan hasilnya sebagai file statis lewat flag --output:

npx next experimental-analyze --output

Command ini menulis hasil analisis ke folder .next/diagnostics/analyze. Folder itu bisa disalin ke lokasi lain untuk dibandingkan nanti:

cp -r .next/diagnostics/analyze ./analyze-sebelum-refactor

Pola ini cocok dipakai sebelum dan sesudah pull request yang mengklaim mengurangi ukuran bundle, supaya klaimnya bisa diverifikasi lewat perbandingan file, bukan cuma asumsi.

Apa Pilihan Bundle Analyzer Kalau Proyek Masih Pakai Webpack?#

next experimental-analyze tidak bisa dipakai di proyek yang masih memakai fungsi webpack() custom di next.config.js/.ts, karena tool ini terintegrasi khusus dengan module graph Turbopack. Sebagai ilustrasi konkret: next.config.ts situs ini sendiri masih memakai fungsi webpack() custom untuk mendaftarkan plugin build Velite (integrasi konten MDX), dan masih berjalan di Next.js 15, bukan 16.1+. Artinya next experimental-analyze belum bisa dijalankan langsung di proyek ini hari ini.

Untuk kasus seperti ini, Next.js tetap menyediakan plugin terpisah @next/bundle-analyzer yang kompatibel Webpack:

npm install @next/bundle-analyzer

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});
 
module.exports = withBundleAnalyzer(nextConfig);

ANALYZE=true npm run build

Menjalankan command di atas membuka tiga tab laporan HTML di browser (client, server, dan edge bundle). Begitu proyek selesai migrasi ke Next.js 16.1+ dan konfigurasi Webpack custom-nya sudah dipindah ke turbopack.rules (lihat panduan migrasi loader Webpack ke Turbopack), next experimental-analyze jadi opsi yang lebih presisi untuk import tracing lintas Server/Client Component.

Bagaimana Cara Mengecilkan Bundle Setelah Menemukan Modul Besar?#

Hasil treemap cuma menunjukkan masalahnya, bukan solusinya. Tiga pola perbaikan paling umum menurut dokumentasi resmi Next.js:

1. optimizePackageImports di next.config.ts untuk library dengan ratusan named export (library ikon, utilitas), supaya hanya modul yang benar-benar dipakai yang ikut dibundel, tanpa mengubah cara menulis import.
2. Pindahkan kerja rendering berat ke Server Component, terutama untuk library yang cuma mengubah data jadi markup (syntax highlighter, chart, parser markdown) dan tidak butuh API browser atau interaktivitas. Situs ini sendiri memakai pola ini: syntax highlighting kode di artikel blog dijalankan oleh Shiki lewat rehype-pretty-code saat build MDX (velite.config.ts), bukan dikirim sebagai JavaScript ke client.
3. serverExternalPackages untuk dependency yang sengaja tidak ingin dibundel di sisi server, biasanya dependency native atau dependency besar yang sudah tersedia di runtime Node.js.

Ringkasan: Treemap Konfirmasi Lokasi Modul Besar, Perbaikannya Tetap Manual#

• next experimental-analyze (Next.js 16.1+, Turbopack) membuka treemap interaktif dengan filter rute/environment/tipe dan import chain presisi, sementara @next/bundle-analyzer jadi jalur paralel untuk proyek yang masih memakai Webpack custom.
• Flag --output menulis hasil analisis ke .next/diagnostics/analyze sebagai file statis, cara paling konkret membuktikan klaim "bundle lebih kecil" setelah refactor.
• Menemukan modul besar di treemap cuma langkah pertama; perbaikannya tetap manual lewat optimizePackageImports, memindahkan kerja ke Server Component, atau serverExternalPackages, tergantung penyebabnya.
• Proyek yang masih di Next.js 15 (seperti situs ini) perlu menuntaskan migrasi ke Next.js 16 dulu sebelum bisa memakai tool bawaan ini. Butuh bantuan audit performa atau migrasi Next.js secara menyeluruh? Layanan web development mencakup kerja seperti ini.