Code Splitting (Pemecahan Bundel Kode)

TL;DR: Code splitting adalah teknik membagi bundel JavaScript menjadi potongan-potongan kecil yang dimuat sesuai kebutuhan. Manfaat utamanya adalah menurunkan ukuran payload halaman pertama, sehingga LCP turun dan pengalaman pengguna lebih cepat di koneksi mobile Indonesia.

Apa itu Code Splitting?

Code splitting memecah file JavaScript besar menjadi beberapa chunk berdasarkan rute, komponen, atau interaksi pengguna. Tanpa code splitting, sebuah aplikasi modern bisa mengirim ratusan kilobyte JavaScript meskipun pengguna hanya membuka satu halaman. Bersama lazy loading, code splitting menjadi salah satu kunci Core Web Vitals yang sehat.

Anggap code splitting seperti pesan menu di restoran. Anda tidak perlu menerima seluruh dapur sekaligus, cukup hidangan yang sedang dipesan. Sisanya menyusul saat dibutuhkan.

Tipe Code Splitting

Contoh di Next.js

Next.js melakukan route-based splitting otomatis. Untuk komponen berat, gunakan dynamic() import:

const Chart = dynamic(() => import('./Chart'), { ssr: false });

Komponen Chart hanya diunduh ketika dirender, bukan saat halaman pertama dimuat.

Kenapa Penting?

Pengguna mobile Indonesia, terutama di luar Jabodetabek, masih banyak yang mengakses lewat 4G dengan throughput rata-rata 15-25 Mbps berdasarkan laporan industri. Bundel JavaScript 500 KB bisa membuat halaman pertama tidak interaktif selama 3-5 detik. Dengan code splitting yang tepat, bundel halaman pertama bisa turun ke 80-150 KB. Panduan resmi web.dev tentang reduce JavaScript payloads menyebut praktik ini sebagai salah satu intervensi performa paling tinggi ROI.

Pertanyaan Umum

Apakah code splitting selalu menurunkan performa loading?

Tidak selalu. Splitting berlebihan justru menambah jumlah request HTTP yang berdampak negatif di koneksi lambat. Idealnya pisah berdasarkan halaman dan komponen besar saja, bukan tiap fungsi kecil.

Apa beda code splitting dan tree shaking?

Code splitting memecah bundel jadi beberapa file. Tree shaking membuang kode yang tidak terpakai dari sebuah bundel. Keduanya saling melengkapi dalam strategi optimasi JavaScript.