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' },
    // ... കൂടുതൽ ചിത്രങ്ങൾ
  ];

  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) {
    // ഫാൾബാക്ക് UI കാണിക്കാൻ സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുക.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // നിങ്ങൾക്ക് ഒരു എറർ റിപ്പോർട്ടിംഗ് സർവീസിലേക്ക് എറർ ലോഗ് ചെയ്യാനും കഴിയും
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // നിങ്ങൾക്ക് ഇഷ്ടമുള്ള ഫാൾബാക്ക് 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. സാധാരണയായി സംഭവിക്കുന്ന തെറ്റുകൾ ഒഴിവാക്കുക

• അമിതമായ വിഭജനം: നിങ്ങളുടെ കോഡിനെ വളരെയധികം ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കുന്നത് ഒന്നിലധികം നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ നടത്തുന്നതിന്റെ ഓവർഹെഡ് കാരണം പ്രകടനത്തെ യഥാർത്ഥത്തിൽ കുറയ്ക്കും. നിങ്ങളുടെ ആപ്ലിക്കേഷന് അനുയോജ്യമായ ഒരു ബാലൻസ് കണ്ടെത്തുക.
• തെറ്റായ സസ്പെൻസ് പ്ലേസ്മെന്റ്: ഒരു നല്ല ഉപയോക്തൃ അനുഭവം നൽകുന്നതിന് നിങ്ങളുടെ <Suspense> ബൗണ്ടറികൾ ഉചിതമായി സ്ഥാപിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. സാധ്യമെങ്കിൽ പേജുകൾ മുഴുവനായും <Suspense> ൽ പൊതിയുന്നത് ഒഴിവാക്കുക.
• എറർ ബൗണ്ടറികൾ മറന്നുപോകുന്നത്: ലേസി ലോഡിംഗ് സമയത്ത് ഉണ്ടാകാനിടയുള്ള പിശകുകൾ കൈകാര്യം ചെയ്യാൻ എപ്പോഴും എറർ ബൗണ്ടറികൾ ഉപയോഗിക്കുക.

യഥാർത്ഥ ലോക ഉദാഹരണങ്ങളും ഉപയോഗങ്ങളും

റിയാക്ട് ആപ്ലിക്കേഷനുകളുടെ പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിന് ലേസി ലോഡിംഗ് വിവിധ സാഹചര്യങ്ങളിൽ പ്രയോഗിക്കാൻ കഴിയും. ചില ഉദാഹരണങ്ങൾ ഇതാ:

• ഇ-കൊമേഴ്‌സ് വെബ്സൈറ്റുകൾ: ഉൽപ്പന്നങ്ങളുടെ ചിത്രങ്ങൾ, വീഡിയോകൾ, വിശദമായ ഉൽപ്പന്ന വിവരണങ്ങൾ എന്നിവ ലേസി ലോഡ് ചെയ്യുന്നത് ഉൽപ്പന്ന പേജുകളുടെ പ്രാരംഭ ലോഡ് സമയം ഗണ്യമായി മെച്ചപ്പെടുത്തും.
• ബ്ലോഗുകളും വാർത്താ വെബ്സൈറ്റുകളും: ചിത്രങ്ങൾ, ഉൾച്ചേർത്ത വീഡിയോകൾ, അഭിപ്രായ വിഭാഗങ്ങൾ എന്നിവ ലേസി ലോഡ് ചെയ്യുന്നത് വായനാനുഭവം മെച്ചപ്പെടുത്തുകയും ബൗൺസ് നിരക്ക് കുറയ്ക്കുകയും ചെയ്യും.
• ഡാഷ്‌ബോർഡുകളും അഡ്മിൻ പാനലുകളും: സങ്കീർണ്ണമായ ചാർട്ടുകൾ, ഗ്രാഫുകൾ, ഡാറ്റാ ടേബിളുകൾ എന്നിവ ലേസി ലോഡ് ചെയ്യുന്നത് ഡാഷ്‌ബോർഡുകളുടെയും അഡ്മിൻ പാനലുകളുടെയും പ്രതികരണശേഷി മെച്ചപ്പെടുത്തും.
• സിംഗിൾ-പേജ് ആപ്ലിക്കേഷനുകൾ (SPAs): റൂട്ടുകളും കോമ്പോണന്റുകളും ലേസി ലോഡ് ചെയ്യുന്നത് SPAs-ന്റെ പ്രാരംഭ ലോഡ് സമയം കുറയ്ക്കുകയും മൊത്തത്തിലുള്ള ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുകയും ചെയ്യും.
• അന്താരാഷ്ട്ര ആപ്ലിക്കേഷനുകൾ: ഉപയോക്താവിന്റെ ഭാഷയ്ക്ക് ആവശ്യമായ പ്രാദേശിക റിസോഴ്‌സുകൾ (ടെക്സ്റ്റ്, ചിത്രങ്ങൾ മുതലായവ) മാത്രം ലോഡ് ചെയ്യുന്നു. ഉദാഹരണത്തിന്, ജർമ്മനിയിലുള്ള ഒരു ഉപയോക്താവിന് ജർമ്മൻ വിവർത്തനങ്ങളും സ്പെയിനിലുള്ള ഒരു ഉപയോക്താവിന് സ്പാനിഷ് വിവർത്തനങ്ങളും ലോഡ് ചെയ്യുന്നു.

ഉദാഹരണം: അന്താരാഷ്ട്ര ഇ-കൊമേഴ്‌സ് വെബ്സൈറ്റ്

ആഗോളതലത്തിൽ ഉൽപ്പന്നങ്ങൾ വിൽക്കുന്ന ഒരു ഇ-കൊമേഴ്‌സ് വെബ്സൈറ്റ് സങ്കൽപ്പിക്കുക. വിവിധ രാജ്യങ്ങളിൽ വ്യത്യസ്ത കറൻസികൾ, ഭാഷകൾ, ഉൽപ്പന്ന കാറ്റലോഗുകൾ എന്നിവ ഉണ്ടായിരിക്കാം. ഓരോ രാജ്യത്തിനുമുള്ള എല്ലാ ഡാറ്റയും മുൻകൂട്ടി ലോഡ് ചെയ്യുന്നതിനു പകരം, ഉപയോക്താവ് സൈറ്റ് സന്ദർശിക്കുമ്പോൾ മാത്രം അവരുടെ ലൊക്കേഷന് അനുയോജ്യമായ ഡാറ്റ ലോഡ് ചെയ്യാൻ നിങ്ങൾക്ക് ലേസി ലോഡിംഗ് ഉപയോഗിക്കാം.

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

function ECommerceSite() {
  const userCountry = getUserCountry(); // ഉപയോക്താവിന്റെ രാജ്യം നിർണ്ണയിക്കാനുള്ള ഫംഗ്ഷൻ

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

ഉപസംഹാരം

റിയാക്ട് ആപ്ലിക്കേഷനുകളുടെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ശക്തമായ സാങ്കേതികതകളാണ് ലേസി ലോഡിംഗും കോമ്പോണന്റ് കോഡ് സ്പ്ലിറ്റിംഗും. കോമ്പോണന്റുകൾ ആവശ്യമുള്ളപ്പോൾ മാത്രം ലോഡ് ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് പ്രാരംഭ ലോഡ് സമയം ഗണ്യമായി കുറയ്ക്കാനും ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താനും നിങ്ങളുടെ SEO മെച്ചപ്പെടുത്താനും കഴിയും. റിയാക്ടിന്റെ ബിൽറ്റ്-ഇൻ React.lazy(), <Suspense> കോമ്പോണന്റുകൾ നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ ലേസി ലോഡിംഗ് നടപ്പിലാക്കുന്നത് എളുപ്പമാക്കുന്നു. ആഗോള പ്രേക്ഷകർക്കായി വേഗതയേറിയതും കൂടുതൽ പ്രതികരണശേഷിയുള്ളതും ആകർഷകവുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് ഈ സാങ്കേതികതകൾ സ്വീകരിക്കുക.

ലേസി ലോഡിംഗ് നടപ്പിലാക്കുമ്പോൾ എല്ലായ്പ്പോഴും ഉപയോക്തൃ അനുഭവം പരിഗണിക്കുക. വിവരദായകമായ ഫാൾബാക്ക് UI-കൾ നൽകുക, ഉണ്ടാകാനിടയുള്ള പിശകുകൾ ഭംഗിയായി കൈകാര്യം ചെയ്യുക, നിങ്ങൾ ആഗ്രഹിച്ച ഫലങ്ങൾ നേടുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രകടനം ശ്രദ്ധാപൂർവ്വം വിശകലനം ചെയ്യുക. വ്യത്യസ്ത സമീപനങ്ങൾ പരീക്ഷിക്കുന്നതിൽ ഭയപ്പെടരുത്, നിങ്ങളുടെ പ്രത്യേക ആവശ്യങ്ങൾക്ക് ഏറ്റവും മികച്ച പരിഹാരം കണ്ടെത്തുക.