Code Splitting di React: Cara Membuat Website Loading Kilat

Masalah Aplikasi Raksasa (Bundle Size Besar)

Saat kamu mem-build aplikasi Single Page Application (SPA) menggunakan React (Vite atau Create React App), sistem (Webpack/Rollup) akan menggabungkan seluruh file JavaScript di proyekmu ke dalam satu file raksasa bernama bundle.js.

Misalnya aplikasimu punya halaman Beranda, halaman Profil, dan halaman Dashboard Admin yang berisi *library* grafik (*Chart.js*) yang sangat berat. Saat pengunjung awam membuka halaman Beranda, Browser TETAP harus men-download seluruh kode milik Dashboard Admin, padahal pengunjung itu belum tentu mengeklik halaman admin! Ini membuat *loading* pertama kali (Initial Load) sangat lambat.

Solusinya: Code Splitting (Memecah Kode)

Code Splitting adalah teknik di mana kita memecah file raksasa tersebut menjadi serpihan-serpihan kecil. Browser HANYA akan men-download file JavaScript dari halaman yang sedang dibuka oleh *user* saat itu juga.

Cara Menerapkannya: React.lazy() dan Suspense

React sudah menyediakan fitur bawaan yang sangat elegan untuk melakukan sihir ini.

Langkah 1: Jangan Gunakan Import Biasa

// CARA KUNO (Membebani Loading Awal)
import DashboardAdmin from './DashboardAdmin';

// CARA MODERN (Lazy Loading Component)
import { lazy, Suspense } from 'react';
const DashboardAdmin = lazy(() => import('./DashboardAdmin'));

Langkah 2: Bungkus dengan Suspense

Karena file DashboardAdmin baru akan di-download tepat saat pengunjung mengeklik menunya, akan ada jeda waktu sekian milidetik saat *download* terjadi. React mewajibkanmu membungkus komponen tersebut dengan untuk menampilkan UI Loading sementara.

function App() {
  return (
    <div>
      <h1>Aplikasi Toko Keren</h1>
      <Suspense fallback={<div>Sedang memuat halaman...</div>}>
        {/* Komponen ini kodenya baru didownload saat dipanggil! */}
        <DashboardAdmin />
      </Suspense>
    </div>
  );
}

Keuntungan Signifikan bagi SEO & UX

Dengan menerapkan Code Splitting pada sistem Routing aplikasimu, ukuran file awal yang harus di-download pengunjung (JavaScript Bundle) bisa menyusut dari 2MB menjadi 200KB saja. Skor Core Web Vitals Google-mu akan hijau, dan pengunjung dari HP bersinyal lemah tidak akan meninggalkan website-mu sebelum terbuka.