React62 / 78

Lazy Loading Route (React.lazy)

Gunakan React.lazy() dan Suspense untuk memecah bundle JavaScript (Code Splitting) sehingga halaman diunduh hanya saat diakses.

👀 Contoh dulu

const Dashboard = React.lazy(() => import('./Dashboard'));
<Suspense fallback={<div>Loading...</div>}><Dashboard /></Suspense>

Hasilnya: Ukuran bundle awal aplikasi menjadi jauh lebih kecil.

💡 Sangat direkomendasikan untuk halaman admin yang ukurannya besar.

📝 Sekarang giliranmu

Bungkus komponen <Home /> menggunakan <Suspense>. Berikan elemen <p>Memuat...</p> pada properti fallback agar tampil selama Home masih diunduh.

Preview