𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁

React मध्ये Lazy Loading

मोठ्या React ॲप्समुळे मोठे JavaScript bundles तयार होतात. मोठे bundles तुमच्या साइटचा वेग कमी करतात. युजर्सना तुमच्या ॲपसोबत संवाद साधण्यासाठी जास्त वेळ वाट पाहावी लागते. यामुळे तुमच्या युजर एक्सपिरियन्सवर (user experience) परिणाम होतो.

Lazy loading या समस्येवर उपाय देते. हे components तेव्हाच लोड करते जेव्हा युजर्सना त्यांची गरज असते. तुम्ही सर्व काही एकाच वेळी लोड करणे थांबवता.

Lazy loading चे फायदे:

• सुरुवातीचा bundle size कमी होतो
• पेज लोड होण्याचा वेग वाढतो
• उत्तम युजर एक्सपिरियन्स
• कमी बँडविड्थचा वापर
• उत्तम Core Web Vitals

React.lazy() कसे वापरावे React मध्ये components डायनॅमिकली इम्पोर्ट करण्यासाठी lazy() नावाचे फंक्शन दिले आहे. React घटक रेंडर (render) करतानाच कोड डाउनलोड करते.

Example code:

import { lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

lazy components सोबत तुम्हाला Suspense वापरणे आवश्यक आहे. Component लोड होत असताना Suspense एक fallback UI दाखवते.

Example code:

import { Suspense, lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductDetail />
    </Suspense>
  );
}

यशस्वी होण्यासाठी दोन नियम:

• तुमचे components 'default exports' वापरणारे असावेत.
• तुमचे lazy imports तुमच्या component functions च्या बाहेर डिक्लेअर करा.

तुम्ही तुमच्या प्रोजेक्ट्समध्ये lazy loading वापरता का? खाली कमेंट करा. मी तुम्हाला उत्तर देईन.

Source: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk