const MyComponent = React.lazy(() => import('./MyComponent'));

import React, { Suspense } from 'react';

function MyPage() {
  return (
    Loading...

इस उदाहरण में, MyComponent लोड होने के दौरान Loading... संदेश प्रदर्शित किया जाएगा। एक बार कंपोनेंट लोड हो जाने के बाद, यह फ़ॉलबैक UI को बदल देगा।

3. व्यावहारिक उदाहरण: एक बड़ी इमेज गैलरी को लेज़ी लोड करना

आइए एक ऐसे परिदृश्य पर विचार करें जहाँ आपके पास एक बड़ी इमेज गैलरी है। सभी छवियों को एक साथ लोड करने से प्रदर्शन पर काफी प्रभाव पड़ सकता है। यहाँ बताया गया है कि आप React.lazy() और <Suspense> का उपयोग करके छवियों को लेज़ी कैसे लोड कर सकते हैं:

import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./Image'));

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Image 1' },
    { id: 2, src: 'image2.jpg', alt: 'Image 2' },
    { id: 3, src: 'image3.jpg', alt: 'Image 3' },
    // ... more images
  ];

  return (
    

      {images.map(image => (
        Loading image...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

और Image.js कंपोनेंट:

import React from 'react';

const Image = ({ src, alt }) => {
  return ;
};

export default Image;

इस उदाहरण में, प्रत्येक छवि <Suspense> कंपोनेंट में लिपटी हुई है, इसलिए प्रत्येक छवि को लोड होने के दौरान एक लोडिंग संदेश प्रदर्शित किया जाएगा। यह छवियों को डाउनलोड करते समय पूरे पृष्ठ को अवरुद्ध होने से रोकता है।

उन्नत तकनीकें और विचार

1. एरर बाउंड्रीज़

लेज़ी लोडिंग का उपयोग करते समय, लोडिंग प्रक्रिया के दौरान होने वाली संभावित त्रुटियों को संभालना महत्वपूर्ण है। इन त्रुटियों को पकड़ने और फ़ॉलबैक UI प्रदर्शित करने के लिए एरर बाउंड्रीज़ का उपयोग किया जा सकता है। आप इस तरह एक एरर बाउंड्री कंपोनेंट बना सकते हैं:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

फिर <Suspense> कंपोनेंट को <ErrorBoundary> के साथ लपेटें:

  Loading...}>
    
  

यदि MyComponent लोड करते समय कोई त्रुटि होती है, तो <ErrorBoundary> इसे पकड़ लेगा और फ़ॉलबैक UI प्रदर्शित करेगा।

2. सर्वर-साइड रेंडरिंग (SSR) और लेज़ी लोडिंग

आपके एप्लिकेशन के प्रारंभिक लोड समय को बेहतर बनाने के लिए लेज़ी लोडिंग का उपयोग सर्वर-साइड रेंडरिंग (SSR) के साथ भी किया जा सकता है। हालांकि, इसके लिए कुछ अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता होती है। आपको यह सुनिश्चित करना होगा कि सर्वर गतिशील आयात को सही ढंग से संभाल सके और क्लाइंट-साइड पर लेज़ी-लोडेड कंपोनेंट्स को ठीक से हाइड्रेट किया जा सके।

Next.js और Gatsby.js जैसे उपकरण SSR वातावरण में लेज़ी लोडिंग और कोड स्प्लिटिंग के लिए अंतर्निहित समर्थन प्रदान करते हैं, जिससे प्रक्रिया बहुत आसान हो जाती है।

3. लेज़ी-लोडेड कंपोनेंट्स को प्रीलोड करना

कुछ मामलों में, आप लेज़ी-लोडेड कंपोनेंट को वास्तव में आवश्यक होने से पहले प्रीलोड करना चाह सकते हैं। यह उन कंपोनेंट्स के लिए उपयोगी हो सकता है जो जल्द ही प्रस्तुत होने की संभावना रखते हैं, जैसे कि फोल्ड के नीचे स्थित कंपोनेंट्स लेकिन स्क्रॉल करके दृश्य में आने की संभावना है। आप import() फ़ंक्शन को मैन्युअल रूप से कॉल करके एक कंपोनेंट को प्रीलोड कर सकते हैं:

import('./MyComponent'); // Preload MyComponent

यह पृष्ठभूमि में कंपोनेंट लोड करना शुरू कर देगा, ताकि जब इसे वास्तव में प्रस्तुत किया जाएगा तो यह अधिक तेज़ी से उपलब्ध होगा।

4. Webpack मैजिक कमेंट्स के साथ डायनामिक आयात

Webpack के "मैजिक कमेंट्स" जेनरेट किए गए कोड चंक्स के नामों को अनुकूलित करने का एक तरीका प्रदान करते हैं। यह आपके एप्लिकेशन की बंडल संरचना को डीबग करने और विश्लेषण करने में सहायक हो सकता है। उदाहरण के लिए:

const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

यह जेनेरिक नाम के बजाय "my-component.js" (या समान) नामक एक कोड चंक बनाएगा।

5. सामान्य नुकसान से बचना

• ओवर-स्प्लिटिंग: अपने कोड को बहुत अधिक छोटे चंक्स में विभाजित करने से कई नेटवर्क अनुरोधों के ओवरहेड के कारण वास्तव में प्रदर्शन कम हो सकता है। अपने एप्लिकेशन के लिए काम करने वाला संतुलन खोजें।
• गलत सस्पेंस प्लेसमेंट: सुनिश्चित करें कि आपके <Suspense> सीमाएँ एक अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए उचित रूप से रखी गई हैं। यदि संभव हो तो पूरे पृष्ठों को <Suspense> में लपेटने से बचें।
• एरर बाउंड्रीज़ भूल जाना: लेज़ी लोडिंग के दौरान संभावित त्रुटियों को संभालने के लिए हमेशा एरर बाउंड्रीज़ का उपयोग करें।

वास्तविक दुनिया के उदाहरण और उपयोग के मामले

रिएक्ट एप्लिकेशन्स के प्रदर्शन को बेहतर बनाने के लिए लेज़ी लोडिंग को विभिन्न परिदृश्यों में लागू किया जा सकता है। यहाँ कुछ उदाहरण दिए गए हैं:

• ई-कॉमर्स वेबसाइटें: उत्पाद छवियों, वीडियो और विस्तृत उत्पाद विवरणों को लेज़ी लोड करने से उत्पाद पृष्ठों का प्रारंभिक लोड समय काफी कम हो सकता है।
• ब्लॉग और समाचार वेबसाइटें: छवियों, एम्बेडेड वीडियो और टिप्पणी अनुभागों को लेज़ी लोड करने से पढ़ने का अनुभव बेहतर हो सकता है और बाउंस दरें कम हो सकती हैं।
• डैशबोर्ड और एडमिन पैनल: जटिल चार्ट, ग्राफ़ और डेटा तालिकाओं को लेज़ी लोड करने से डैशबोर्ड और एडमिन पैनल की प्रतिक्रियाशीलता में सुधार हो सकता है।
• सिंगल-पेज एप्लिकेशन्स (SPAs): मार्गों और कंपोनेंट्स को लेज़ी लोड करने से SPAs का प्रारंभिक लोड समय कम हो सकता है और समग्र उपयोगकर्ता अनुभव में सुधार हो सकता है।
• अंतर्राष्ट्रीयकृत एप्लिकेशन्स: उपयोगकर्ता की भाषा के लिए आवश्यक होने पर केवल स्थानीय-विशिष्ट संसाधनों (टेक्स्ट, चित्र, आदि) को लोड करना। उदाहरण के लिए, जर्मनी में एक उपयोगकर्ता के लिए जर्मन अनुवाद लोड करना, और स्पेन में एक उपयोगकर्ता के लिए स्पेनिश अनुवाद लोड करना।

उदाहरण: अंतर्राष्ट्रीय ई-कॉमर्स वेबसाइट

एक ई-कॉमर्स वेबसाइट की कल्पना करें जो विश्व स्तर पर उत्पादों को बेचती है। विभिन्न देशों में अलग-अलग मुद्राएं, भाषाएं और उत्पाद कैटलॉग हो सकते हैं। हर देश के लिए सभी डेटा को अग्रिम रूप से लोड करने के बजाय, आप साइट पर जाने पर केवल उपयोगकर्ता के स्थान के विशिष्ट डेटा को लोड करने के लिए लेज़ी लोडिंग का उपयोग कर सकते हैं।

const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Function to determine user's country

  return (
    Loading content for your region...}>
      
      
    
  );
}

निष्कर्ष

लेज़ी लोडिंग और कंपोनेंट कोड स्प्लिटिंग रिएक्ट एप्लिकेशन्स के प्रदर्शन को अनुकूलित करने के लिए शक्तिशाली तकनीकें हैं। कंपोनेंट्स को केवल तब लोड करके जब उनकी आवश्यकता होती है, आप प्रारंभिक लोड समय को काफी कम कर सकते हैं, उपयोगकर्ता अनुभव को बेहतर बना सकते हैं और अपने एसईओ को बढ़ा सकते हैं। रिएक्ट के अंतर्निहित React.lazy() और <Suspense> कंपोनेंट्स आपके प्रोजेक्ट्स में लेज़ी लोडिंग को लागू करना आसान बनाते हैं। वैश्विक दर्शकों के लिए तेज़, अधिक प्रतिक्रियाशील और अधिक आकर्षक वेब एप्लिकेशन्स बनाने के लिए इन तकनीकों को अपनाएं।

लेज़ी लोडिंग लागू करते समय उपयोगकर्ता अनुभव पर हमेशा विचार करें। जानकारीपूर्ण फ़ॉलबैक UI प्रदान करें, संभावित त्रुटियों को शालीनता से संभालें, और यह सुनिश्चित करने के लिए अपने एप्लिकेशन के प्रदर्शन का सावधानीपूर्वक विश्लेषण करें कि आप वांछित परिणाम प्राप्त कर रहे हैं। विभिन्न दृष्टिकोणों के साथ प्रयोग करने और अपनी विशिष्ट आवश्यकताओं के लिए सर्वोत्तम समाधान खोजने से डरो मत।