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

import React, { Suspense } from 'react';

function MyPage() {
  return (
    లోడ్ అవుతోంది...

ఈ ఉదాహరణలో, MyComponent లోడ్ అవుతున్నప్పుడు లోడ్ అవుతోంది... సందేశం ప్రదర్శించబడుతుంది. కాంపోనెంట్ లోడ్ అయిన తర్వాత, అది ఫాల్‌బ్యాక్ 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' },
    // ... మరిన్ని చిత్రాలు
  ];

  return (
    

      {images.map(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) {
    // తదుపరి రెండర్ ఫాల్‌బ్యాక్ UIని చూపించడానికి స్థితిని నవీకరించండి.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // మీరు లోపాన్ని ఎర్రర్ రిపోర్టింగ్ సేవకు కూడా లాగ్ చేయవచ్చు
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // మీరు ఏదైనా అనుకూల ఫాల్‌బ్యాక్ UIని రెండర్ చేయవచ్చు
      return 
ఏదో తప్పు జరిగింది.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

అప్పుడు <Suspense> కాంపోనెంట్‌ను <ErrorBoundary>తో చుట్టండి:

  లోడ్ అవుతోంది...}>
    
  

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. సాధారణ పొరపాట్లను నివారించడం

• అతిగా-విభజించడం: మీ కోడ్‌ను చాలా చిన్న భాగాలుగా విభజించడం వల్ల బహుళ నెట్‌వర్క్ అభ్యర్థనలు చేసే ఓవర్‌హెడ్ కారణంగా పనితీరు వాస్తవానికి తగ్గుతుంది. మీ అప్లికేషన్ కోసం పనిచేసే సమతుల్యతను కనుగొనండి.
• తప్పు సస్పెన్స్ ప్లేస్‌మెంట్: మంచి వినియోగదారు అనుభవాన్ని అందించడానికి మీ <Suspense> బౌండరీలు సముచితంగా ఉంచబడ్డాయని నిర్ధారించుకోండి. వీలైతే మొత్తం పేజీలను <Suspense>లో చుట్టడం మానుకోండి.
• ఎర్రర్ బౌండరీలను మర్చిపోవడం: లేజీ లోడింగ్ సమయంలో సంభావ్య లోపాలను నిర్వహించడానికి ఎల్లప్పుడూ ఎర్రర్ బౌండరీలను ఉపయోగించండి.

వాస్తవ-ప్రపంచ ఉదాహరణలు మరియు వినియోగ సందర్భాలు

రియాక్ట్ అప్లికేషన్‌ల పనితీరును మెరుగుపరచడానికి లేజీ లోడింగ్‌ను విస్తృత శ్రేణి సందర్భాలలో వర్తింపజేయవచ్చు. ఇక్కడ కొన్ని ఉదాహరణలు ఉన్నాయి:

• ఇ-కామర్స్ వెబ్‌సైట్‌లు: ఉత్పత్తి చిత్రాలు, వీడియోలు మరియు వివరణాత్మక ఉత్పత్తి వర్ణనలను లేజీ లోడ్ చేయడం ఉత్పత్తి పేజీల ప్రారంభ లోడ్ సమయాన్ని గణనీయంగా మెరుగుపరుస్తుంది.
• బ్లాగ్‌లు మరియు వార్తా వెబ్‌సైట్‌లు: చిత్రాలు, పొందుపరిచిన వీడియోలు మరియు వ్యాఖ్య విభాగాలను లేజీ లోడ్ చేయడం పఠన అనుభవాన్ని మెరుగుపరుస్తుంది మరియు బౌన్స్ రేట్లను తగ్గిస్తుంది.
• డాష్‌బోర్డ్‌లు మరియు అడ్మిన్ ప్యానెల్‌లు: సంక్లిష్టమైన చార్ట్‌లు, గ్రాఫ్‌లు మరియు డేటా పట్టికలను లేజీ లోడ్ చేయడం డాష్‌బోర్డ్‌లు మరియు అడ్మిన్ ప్యానెల్‌ల ప్రతిస్పందనను మెరుగుపరుస్తుంది.
• సింగిల్-పేజ్ అప్లికేషన్‌లు (SPAలు): మార్గాలు మరియు కాంపోనెంట్లను లేజీ లోడ్ చేయడం SPAల ప్రారంభ లోడ్ సమయాన్ని తగ్గిస్తుంది మరియు మొత్తం వినియోగదారు అనుభవాన్ని మెరుగుపరుస్తుంది.
• అంతర్జాతీయీకరించిన అప్లికేషన్‌లు: వినియోగదారు భాషకు అవసరమైనప్పుడు మాత్రమే ప్రాంత-నిర్దిష్ట వనరులను (టెక్స్ట్, చిత్రాలు మొదలైనవి) లోడ్ చేయడం. ఉదాహరణకు, జర్మనీలోని వినియోగదారు కోసం జర్మన్ అనువాదాలను మరియు స్పెయిన్‌లోని వినియోగదారు కోసం స్పానిష్ అనువాదాలను లోడ్ చేయడం.

ఉదాహరణ: అంతర్జాతీయ ఇ-కామర్స్ వెబ్‌సైట్

ప్రపంచవ్యాప్తంగా ఉత్పత్తులను విక్రయించే ఒక ఇ-కామర్స్ వెబ్‌సైట్‌ను ఊహించుకోండి. వేర్వేరు దేశాలలో వేర్వేరు కరెన్సీలు, భాషలు మరియు ఉత్పత్తి కేటలాగ్‌లు ఉండవచ్చు. ప్రతి దేశం కోసం అన్ని డేటాను ముందుగా లోడ్ చేయడానికి బదులుగా, వినియోగదారు యొక్క స్థానానికి నిర్దిష్టమైన డేటాను వారు సైట్‌ను సందర్శించినప్పుడు మాత్రమే లోడ్ చేయడానికి మీరు లేజీ లోడింగ్‌ను ఉపయోగించవచ్చు.

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

function ECommerceSite() {
  const userCountry = getUserCountry(); // వినియోగదారు దేశాన్ని నిర్ధారించడానికి ఫంక్షన్

  return (
    మీ ప్రాంతం కోసం కంటెంట్ లోడ్ అవుతోంది...}>
      
      
    
  );
}

ముగింపు

లేజీ లోడింగ్ మరియు కాంపోనెంట్ కోడ్ స్ప్లిట్టింగ్ రియాక్ట్ అప్లికేషన్‌ల పనితీరును ఆప్టిమైజ్ చేయడానికి శక్తివంతమైన పద్ధతులు. కాంపోనెంట్లను అవసరమైనప్పుడు మాత్రమే లోడ్ చేయడం ద్వారా, మీరు ప్రారంభ లోడ్ సమయాన్ని గణనీయంగా తగ్గించవచ్చు, వినియోగదారు అనుభవాన్ని మెరుగుపరచవచ్చు మరియు మీ SEOని మెరుగుపరచవచ్చు. రియాక్ట్ యొక్క అంతర్నిర్మిత React.lazy() మరియు <Suspense> కాంపోనెంట్లు మీ ప్రాజెక్ట్‌లలో లేజీ లోడింగ్‌ను అమలు చేయడాన్ని సులభతరం చేస్తాయి. ప్రపంచ ప్రేక్షకుల కోసం వేగవంతమైన, మరింత ప్రతిస్పందించే మరియు మరింత ఆకర్షణీయమైన వెబ్ అప్లికేషన్‌లను రూపొందించడానికి ఈ పద్ధతులను స్వీకరించండి.

లేజీ లోడింగ్‌ను అమలు చేసేటప్పుడు ఎల్లప్పుడూ వినియోగదారు అనుభవాన్ని పరిగణనలోకి తీసుకోవాలని గుర్తుంచుకోండి. సమాచార ఫాల్‌బ్యాక్ UIలను అందించండి, సంభావ్య లోపాలను సునాయాసంగా నిర్వహించండి మరియు మీరు ఆశించిన ఫలితాలను సాధిస్తున్నారని నిర్ధారించుకోవడానికి మీ అప్లికేషన్ పనితీరును జాగ్రత్తగా విశ్లేషించండి. విభిన్న పద్ధతులతో ప్రయోగాలు చేయడానికి మరియు మీ నిర్దిష్ట అవసరాలకు ఉత్తమ పరిష్కారాన్ని కనుగొనడానికి భయపడకండి.