Code Splitting

Code Splitting adalah teknik memecah JavaScript bundle yang besar menjadi chunk-chunk yang lebih kecil, di-load secara lazy (hanya saat dibutuhkan). Tanpa code splitting, seluruh aplikasi di-download saat user pertama kali membuka halaman — meski user hanya melihat homepage. Dengan code splitting: route-based splitting (setiap halaman/routing jadi chunk terpisah — di-load saat user navigasi ke route tersebut), component-based splitting (modal, chart, heavy component di-load saat dibutuhkan), dan library splitting (load library hanya di halaman yang menggunakannya). React mendukung code splitting via React.lazy() + Suspense, atau framework seperti Next.js yang melakukannya otomatis per page.

Contoh Kode

// Code splitting di React
import { lazy, Suspense } from 'react';

// Lazy load — chunk terpisah
const Dashboard = lazy(() => import('./Dashboard'));
const HeavyChart = lazy(() => import('./HeavyChart'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Dashboard />
      <HeavyChart />
    </Suspense>
  );
}