𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁
Aplikasi React yang besar menghasilkan bundle JavaScript yang besar. Bundle yang besar melambatkan laman web anda. Pengguna menunggu lebih lama untuk berinteraksi dengan aplikasi anda. Ini menjejaskan pengalaman pengguna anda.
Lazy loading menyelesaikan masalah ini. Ia memuatkan komponen hanya apabila pengguna memerlukannya. Anda tidak lagi memuatkan semua perkara sekaligus.
Kelebihan lazy loading:
- Saiz bundle awal yang lebih kecil
- Pemuatan halaman yang lebih pantas
- Pengalaman pengguna yang lebih baik
- Penggunaan jalur lebar yang lebih rendah
- Core Web Vitals yang lebih baik
Cara menggunakan React.lazy() React menyediakan fungsi bernama lazy() untuk mengimport komponen secara dinamik. React memuat turun kod hanya apabila ia merender komponen tersebut.
Contoh kod: import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
Anda mesti menggunakan Suspense dengan komponen lazy. Suspense memaparkan UI fallback sementara komponen sedang dimuatkan.
Contoh kod: import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() { return ( <Suspense fallback={
Dua peraturan untuk berjaya:
- Komponen anda mesti menggunakan default exports.
- Isytiharkan import lazy anda di luar fungsi komponen anda.
Adakah anda menggunakan lazy loading dalam projek anda? Tinggalkan komen di bawah. Saya akan membalasnya.