React में Lazy Loading
बड़े React ऐप्स बड़े JavaScript bundles बनाते हैं। बड़े bundles आपकी साइट को धीमा कर देते हैं। यूज़र्स को आपके ऐप के साथ इंटरैक्ट करने के लिए अधिक समय तक इंतज़ार करना पड़ता है। इससे आपके user experience पर बुरा असर पड़ता है।
Lazy loading इस समस्या का समाधान करती है। यह components को केवल तभी लोड करती है जब यूज़र्स को उनकी आवश्यकता होती है। आप एक साथ सब कुछ लोड करना बंद कर देते हैं।
Lazy loading के लाभ:
- छोटा initial bundle size
- तेज़ पेज लोड
- बेहतर user experience
- कम bandwidth का उपयोग
- बेहतर Core Web Vitals
React.lazy() का उपयोग कैसे करें React components को dynamically import करने के लिए lazy() नामक एक function प्रदान करता है। React कोड को केवल तभी डाउनलोड करता है जब वह component को render करता है।
Example code: import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
आपको lazy components के साथ Suspense का उपयोग करना चाहिए। Suspense component लोड होने के दौरान एक fallback UI दिखाता है।
Example code: import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() { return ( <Suspense fallback={
सफलता के लिए दो नियम:
- आपके components में default exports का उपयोग होना चाहिए।
- अपने lazy imports को अपने component functions के बाहर declare करें।
क्या आप अपने प्रोजेक्ट्स में lazy loading का उपयोग करते हैं? नीचे कमेंट करें। मैं आपको जवाब दूँगा।