𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁
Aplikasi React yang besar menghasilkan bundle JavaScript yang besar. Bundle yang besar memperlambat situs Anda. Pengguna menunggu lebih lama untuk berinteraksi dengan aplikasi Anda. Ini berdampak buruk pada pengalaman pengguna Anda.
Lazy loading mengatasi hal ini. Ia memuat komponen hanya saat pengguna membutuhkannya. Anda berhenti memuat semuanya sekaligus.
Manfaat lazy loading:
- Ukuran bundle awal yang lebih kecil
- Pemuatan halaman yang lebih cepat
- Pengalaman pengguna yang lebih baik
- Penggunaan bandwidth yang lebih rendah
- Core Web Vitals yang lebih baik
Cara menggunakan React.lazy() React menyediakan fungsi bernama lazy() untuk mengimpor komponen secara dinamis. React mengunduh kode hanya saat merender komponen tersebut.
Contoh kode: import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
Anda harus menggunakan Suspense dengan komponen lazy. Suspense menampilkan UI fallback saat komponen sedang dimuat.
Contoh kode: import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() { return ( <Suspense fallback={
Dua aturan agar berhasil:
- Komponen Anda harus menggunakan default exports.
- Deklarasikan impor lazy Anda di luar fungsi komponen.
Apakah Anda menggunakan lazy loading dalam proyek Anda? Tinggalkan komentar di bawah. Saya akan membalas Anda.