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

import React, { Suspense } from 'react';

function MyPage() {
  return (
    Loading...

આ ઉદાહરણમાં, MyComponent લોડ થતી વખતે Loading... સંદેશ પ્રદર્શિત થશે. એકવાર કોમ્પોનન્ટ લોડ થઈ જાય, તે ફોલબેક UI ને બદલી દેશે.

૩. વ્યવહારુ ઉદાહરણ: મોટી ઇમેજ ગેલેરીનું લેઝી લોડિંગ

ચાલો એક એવી પરિસ્થિતિનો વિચાર કરીએ જ્યાં તમારી પાસે મોટી ઇમેજ ગેલેરી છે. બધી છબીઓ એકસાથે લોડ કરવાથી પ્રદર્શન પર નોંધપાત્ર અસર પડી શકે છે. અહીં તમે 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> કોમ્પોનન્ટમાં રેપ કરેલી છે, તેથી દરેક છબી લોડ થતી વખતે તેના માટે લોડિંગ સંદેશ પ્રદર્શિત થશે. આ છબીઓ ડાઉનલોડ થતી વખતે સમગ્ર પૃષ્ઠને બ્લોક થવાથી અટકાવે છે.

અદ્યતન તકનીકો અને વિચારણાઓ

૧. એરર બાઉન્ડ્રીઝ

લેઝી લોડિંગનો ઉપયોગ કરતી વખતે, લોડિંગ પ્રક્રિયા દરમિયાન થઈ શકે તેવી સંભવિત ભૂલોને હેન્ડલ કરવી મહત્વપૂર્ણ છે. એરર બાઉન્ડ્રીઝનો ઉપયોગ આ ભૂલોને પકડવા અને ફોલબેક 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 પ્રદર્શિત કરશે.

૨. સર્વર-સાઇડ રેન્ડરિંગ (SSR) અને લેઝી લોડિંગ

લેઝી લોડિંગનો ઉપયોગ તમારી એપ્લિકેશનના પ્રારંભિક લોડ સમયને સુધારવા માટે સર્વર-સાઇડ રેન્ડરિંગ (SSR) સાથે પણ કરી શકાય છે. જો કે, તેને કેટલાક વધારાના કન્ફિગરેશનની જરૂર છે. તમારે ખાતરી કરવાની જરૂર પડશે કે સર્વર ડાયનેમિક ઇમ્પોર્ટ્સને યોગ્ય રીતે હેન્ડલ કરી શકે છે અને લેઝી-લોડેડ કોમ્પોનન્ટ્સ ક્લાયંટ-સાઇડ પર યોગ્ય રીતે હાઇડ્રેટેડ છે.

Next.js અને Gatsby.js જેવા સાધનો SSR વાતાવરણમાં લેઝી લોડિંગ અને કોડ સ્પ્લિટિંગ માટે બિલ્ટ-ઇન સપોર્ટ પૂરો પાડે છે, જે પ્રક્રિયાને ખૂબ સરળ બનાવે છે.

૩. લેઝી-લોડેડ કોમ્પોનન્ટ્સનું પ્રીલોડિંગ

કેટલાક કિસ્સાઓમાં, તમે લેઝી-લોડેડ કોમ્પોનન્ટને તેની ખરેખર જરૂર પડે તે પહેલાં પ્રીલોડ કરવા માંગી શકો છો. આ તે કોમ્પોનન્ટ્સ માટે ઉપયોગી થઈ શકે છે જે ટૂંક સમયમાં રેન્ડર થવાની સંભાવના છે, જેમ કે તે કોમ્પોનન્ટ્સ જે ફોલ્ડની નીચે સ્થિત છે પરંતુ વ્યુમાં સ્ક્રોલ થવાની સંભાવના છે. તમે import() ફંક્શનને મેન્યુઅલી કૉલ કરીને કોમ્પોનન્ટને પ્રીલોડ કરી શકો છો:

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

આ બેકગ્રાઉન્ડમાં કોમ્પોનન્ટ લોડ કરવાનું શરૂ કરશે, તેથી જ્યારે તે ખરેખર રેન્ડર થશે ત્યારે તે વધુ ઝડપથી ઉપલબ્ધ થશે.

૪. વેબપેક મેજિક કમેન્ટ્સ સાથે ડાયનેમિક ઇમ્પોર્ટ્સ

વેબપેકની "મેજિક કમેન્ટ્સ" જનરેટ થયેલ કોડ ચંક્સના નામોને કસ્ટમાઇઝ કરવાની રીત પ્રદાન કરે છે. આ તમારી એપ્લિકેશનના બંડલ માળખાના ડિબગીંગ અને વિશ્લેષણ માટે મદદરૂપ થઈ શકે છે. ઉદાહરણ તરીકે:

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

આ એક સામાન્ય નામને બદલે "my-component.js" (અથવા સમાન) નામનો કોડ ચંક બનાવશે.

૫. સામાન્ય ભૂલો ટાળવી

• ઓવર-સ્પ્લિટિંગ: તમારા કોડને ઘણા નાના ભાગોમાં વિભાજીત કરવાથી બહુવિધ નેટવર્ક વિનંતીઓ કરવાના ઓવરહેડને કારણે પ્રદર્શન ખરેખર ઘટી શકે છે. તમારી એપ્લિકેશન માટે કામ કરતું સંતુલન શોધો.
• ખોટું સસ્પેન્સ પ્લેસમેન્ટ: ખાતરી કરો કે તમારી <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 પ્રદાન કરો, સંભવિત ભૂલોને આકર્ષક રીતે હેન્ડલ કરો અને તમારી એપ્લિકેશનના પ્રદર્શનનું કાળજીપૂર્વક વિશ્લેષણ કરો જેથી ખાતરી થઈ શકે કે તમે ઇચ્છિત પરિણામો પ્રાપ્ત કરી રહ્યાં છો. જુદા જુદા અભિગમો સાથે પ્રયોગ કરવામાં ડરશો નહીં અને તમારી ચોક્કસ જરૂરિયાતો માટે શ્રેષ્ઠ ઉકેલ શોધો.