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. एरर बाऊंड्रीज (Error Boundaries)

लेझी लोडिंग वापरताना, लोडिंग प्रक्रियेदरम्यान येऊ शकणाऱ्या संभाव्य एरर्स हाताळणे महत्त्वाचे आहे. एरर बाऊंड्रीजचा वापर या एरर्स पकडण्यासाठी आणि एक फॉलबॅक 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'); // MyComponent प्रीलोड करा

यामुळे कंपोनेंट बॅकग्राउंडमध्ये लोड होण्यास सुरुवात होईल, त्यामुळे जेव्हा तो प्रत्यक्षात रेंडर होईल तेव्हा तो अधिक लवकर उपलब्ध होईल.

4. वेबपॅक मॅजिक कमेंट्ससह डायनॅमिक इम्पोर्ट्स

वेबपॅकच्या "मॅजिक कमेंट्स" जनरेट केलेल्या कोड चंक्सची नावे कस्टमाइझ करण्याचा एक मार्ग प्रदान करतात. हे तुमच्या ॲप्लिकेशनच्या बंडल स्ट्रक्चरचे डीबगिंग आणि विश्लेषण करण्यासाठी उपयुक्त ठरू शकते. उदाहरणार्थ:

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

यामुळे जेनेरिक नावाऐवजी "my-component.js" (किंवा तत्सम) नावाचा कोड चंक तयार होईल.

5. सामान्य चुका टाळणे

• अति-स्प्लिटिंग (Over-splitting): तुमच्या कोडला खूप लहान चंक्समध्ये विभागल्याने अनेक नेटवर्क रिक्वेस्ट्सच्या ओव्हरहेडमुळे परफॉर्मन्स प्रत्यक्षात कमी होऊ शकतो. तुमच्या ॲप्लिकेशनसाठी योग्य संतुलन शोधा.
• चुकीचे सस्पेन्स प्लेसमेंट: चांगला वापरकर्ता अनुभव देण्यासाठी तुमची <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...}>
      
      
    
  );
}

निष्कर्ष

लेझी लोडिंग आणि कंपोनेंट कोड स्प्लिटिंग ही रिएक्ट ॲप्लिकेशन्सचा परफॉर्मन्स ऑप्टिमाइझ करण्यासाठी शक्तिशाली तंत्रे आहेत. कंपोनेंट्स फक्त गरज असेल तेव्हाच लोड करून, तुम्ही इनिशियल लोड टाइम लक्षणीयरीत्या कमी करू शकता, वापरकर्ता अनुभव सुधारू शकता आणि तुमचा SEO वाढवू शकता. रिएक्टचे अंगभूत React.lazy() आणि <Suspense> कंपोनेंट्स तुमच्या प्रोजेक्ट्समध्ये लेझी लोडिंग लागू करणे सोपे करतात. जागतिक प्रेक्षकांसाठी जलद, अधिक प्रतिसाद देणारे आणि अधिक आकर्षक वेब ॲप्लिकेशन्स तयार करण्यासाठी ही तंत्रे स्वीकारा.

लेझी लोडिंग लागू करताना नेहमी वापरकर्त्याच्या अनुभवाचा विचार करा. माहितीपूर्ण फॉलबॅक UIs प्रदान करा, संभाव्य एरर्स व्यवस्थित हाताळा आणि इच्छित परिणाम मिळत असल्याची खात्री करण्यासाठी तुमच्या ॲप्लिकेशनच्या परफॉर्मन्सचे काळजीपूर्वक विश्लेषण करा. वेगवेगळ्या दृष्टिकोनांसह प्रयोग करण्यास घाबरू नका आणि तुमच्या विशिष्ट गरजांसाठी सर्वोत्तम उपाय शोधा.