Performa React: Code Splitting dengan Lazy & Suspense

Halo, Teman-teman Developer! 👋

Saya lihat kalian sudah makin jago bikin aplikasi React. Komponen di mana-mana, fitur makin canggih. Tapi, pernah nggak sih kalian merasa…

”Kok aplikasi saya butuh 5 detik cuma buat muncul di HP ya?” 🤔

Jawaban dari masalah ini seringkali ada di Bundle Size. Secara default, React (dan tools seperti Webpack atau Vite) akan membungkus semua kode kalian menjadi satu file JavaScript raksasa. Ketika user membuka halaman Home, mereka sebenarnya juga men-download kode untuk halaman Settings, Dashboard, dan Profile—padahal mereka belum tentu buka halaman itu!

Hari ini, kita akan perbaiki itu. Kita akan bahas Code Splitting menggunakan React.lazy dan Suspense.

Apa itu Code Splitting?

Bayangkan kalian mau pergi liburan.

• Tanpa Code Splitting: Kalian bawa seluruh isi rumah di dalam tas punggung. Berat banget, dan jalannya jadi lambat.
• Dengan Code Splitting: Kalian cuma bawa baju ganti buat hari ini. Kalau butuh baju renang, kalian ambil (fetch) nanti pas sudah sampai di pantai.

Dalam istilah React, daripada mengirim satu file berukuran 5MB, kita kirim file kecil 200KB untuk halaman Home. Sisanya baru di-download hanya ketika user membutuhkannya.

Duo Dinamis: Lazy & Suspense

Di React 18, cara pakainya gampang banget. Nggak perlu config yang ribet.

1. Cara Lama (Static Import)

Biasanya, kita import komponen di bagian paling atas file:

import React from 'react';
import HeavyWidget from './HeavyWidget'; // <--- Langsung di-load!

const App = () => {
  return (
    <div>
      <h1>Aplikasi Saya</h1>
      <HeavyWidget />
    </div>
  );
};

Ini artinya HeavyWidget akan masuk ke dalam bundle utama, meskipun komponennya disembunyikan atau ada di bagian paling bawah halaman.

2. Cara Baru (Lazy Load)

Mari kita gunakan React.lazy untuk meng-import secara dinamis.

import React, { lazy, Suspense } from 'react';

// Komponen ini TIDAK akan di-load sampai kita mencoba merendernya
const HeavyWidget = lazy(() => import('./HeavyWidget'));

const App = () => {
  return (
    <div>
      <h1>Aplikasi Saya</h1>

      {/* Kita butuh Suspense untuk menampilkan sesuatu selagi kode sedang di-download */}
      <Suspense fallback={<div>Loading widget... ⏳</div>}>
        <HeavyWidget />
      </Suspense>
    </div>
  );
};

Apa yang baru saja terjadi?

1. Kita ganti import ... from ... dengan lazy(() => import(...)).
2. Kita bungkus komponennya dengan <Suspense>.
3. Kita kasih tampilan fallback (seperti spinner atau teks loading).

Sekarang, kode untuk HeavyWidget dipisah menjadi file (chunk) tersendiri. File itu cuma bakal di-download dari server kalau <HeavyWidget /> benar-benar dirender.

Kapan Harus Pakai Ini?

Jangan lazy load semuanya ya. Kalau terlalu banyak dipecah, performa malah bisa turun (karena kebanyakan request network).

Kandidat yang Bagus untuk Lazy Loading:

1. Routes: Kalau kalian pakai React Router, wajib banget lazy load halaman-halamannya (/dashboard, /settings, dll).
2. Heavy Components: Grafik besar, peta, atau rich text editor.
3. Modals/Dialogs: Hal-hal yang nggak kelihatan saat halaman pertama kali dibuka.

Contoh Dunia Nyata: Route-based Splitting

Ini adalah kasus penggunaan yang paling umum.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

const App = () => (
  <Router>
    {/* Satu Suspense untuk menangani semuanya! */}
    <Suspense fallback={<div>Loading page...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  </Router>
);

Kesimpulan

Code splitting adalah salah satu optimasi performa paling berdampak yang bisa kalian lakukan. Ini bikin loading awal aplikasi jadi cepat dan user kalian jadi happy.

Mulailah dengan memecah Routes. Setelah itu, cari komponen-komponen yang berat.

Keep it light, keep it fast! 🚀