Lazy Loading katika React
Programu kubwa za React hutengeneza JavaScript bundles kubwa. Bundles kubwa hupunguza kasi ya tovuti yako. Watumiaji husubiri kwa muda mrefu zaidi ili kutumia programu yako. Hii inaharibu uzoefu wa mtumiaji.
Lazy loading hutatua hili. Hupakia components pale tu watumiaji wanapozihitaji. Unaacha kupakia kila kitu kwa wakati mmoja.
Faida za lazy loading:
- Ukubwa mdogo wa bundle ya awali
- Upakiaji wa haraka wa kurasa
- Uzoefu bora wa mtumiaji
- Matumizi madogo ya bandwidth
- Core Web Vitals bora zaidi
Jinsi ya kutumia React.lazy() React hutoa function inayoitwa lazy() ili ku-import components kwa njia ya dynamic. React inapakua kodi hiyo pale tu inapofanya render ya component hiyo.
Example code: import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
Lazima utumie Suspense pamoja na lazy components. Suspense huonyesha UI ya mbadala (fallback UI) wakati component inapakuliwa.
Example code: import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() { return ( <Suspense fallback={
Kanuni mbili kwa mafanikio:
- Components zako lazima zitumie default exports.
- Tangaza lazy imports zako nje ya function za component zako.
Je, unatumia lazy loading katika miradi yako? Acha maoni hapa chini. Nitakujibu.