ગુજરાતી

લેઝી લોડિંગ અને કોમ્પોનન્ટ કોડ સ્પ્લિટિંગ સાથે તમારી રિએક્ટ એપ્લિકેશન્સ માટે ઝડપી પ્રારંભિક લોડ સમય અને સુધારેલ પ્રદર્શન મેળવો. વ્યવહારુ તકનીકો અને શ્રેષ્ઠ પદ્ધતિઓ શીખો.

રિએક્ટ લેઝી લોડિંગ: શ્રેષ્ઠ પ્રદર્શન માટે કોમ્પોનન્ટ કોડ સ્પ્લિટિંગ

આજના ઝડપી ડિજિટલ વિશ્વમાં, વેબસાઇટનું પ્રદર્શન સર્વોપરી છે. વપરાશકર્તાઓ ત્વરિત સંતોષની અપેક્ષા રાખે છે, અને ધીમો લોડિંગ સમય હતાશા, ત્યજી દેવાયેલી કાર્ટ અને નકારાત્મક બ્રાન્ડ છબી તરફ દોરી શકે છે. રિએક્ટ એપ્લિકેશન્સ માટે, સરળ અને આકર્ષક વપરાશકર્તા અનુભવ પ્રદાન કરવા માટે પ્રદર્શનને શ્રેષ્ઠ બનાવવું નિર્ણાયક છે. આ હાંસલ કરવા માટેની એક શક્તિશાળી તકનીક છે લેઝી લોડિંગ સાથે કોમ્પોનન્ટ કોડ સ્પ્લિટિંગ.

લેઝી લોડિંગ અને કોડ સ્પ્લિટિંગ શું છે?

લેઝી લોડિંગ એ એક તકનીક છે જ્યાં સંસાધનો, જેમ કે છબીઓ, સ્ક્રિપ્ટો અને કોમ્પોનન્ટ્સ, ફક્ત ત્યારે જ લોડ થાય છે જ્યારે તેમની જરૂર હોય, પ્રારંભિક પેજ લોડ દરમિયાન એકસાથે લોડ કરવાને બદલે. આનાથી અપફ્રન્ટમાં ડાઉનલોડ અને પાર્સ કરવાની જરૂર પડતી ડેટાની માત્રામાં નોંધપાત્ર ઘટાડો થાય છે, જેના પરિણામે ઝડપી પ્રારંભિક લોડ સમય અને સુધારેલ અનુભવાયેલ પ્રદર્શન મળે છે.

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

રિએક્ટમાં લેઝી લોડિંગ અને કોડ સ્પ્લિટિંગનો ઉપયોગ શા માટે કરવો?

તમારે તમારા રિએક્ટ પ્રોજેક્ટ્સમાં લેઝી લોડિંગ અને કોડ સ્પ્લિટિંગનો સમાવેશ કરવાનું શા માટે વિચારવું જોઈએ તેના કારણો અહીં આપેલા છે:

રિએક્ટમાં લેઝી લોડિંગ કેવી રીતે લાગુ કરવું

રિએક્ટ React.lazy અને Suspense કોમ્પોનન્ટ્સનો ઉપયોગ કરીને લેઝી લોડિંગ માટે બિલ્ટ-ઇન સપોર્ટ પૂરો પાડે છે. અહીં એક પગલું-દર-પગલું માર્ગદર્શિકા છે:

૧. React.lazy() નો ઉપયોગ

React.lazy() તમને કોમ્પોનન્ટ્સને ગતિશીલ રીતે ઇમ્પોર્ટ કરવાની મંજૂરી આપે છે, જે તમારા કોડને અલગ ભાગોમાં અસરકારક રીતે વિભાજીત કરે છે. તે એક ફંક્શન લે છે જે import() ને કૉલ કરે છે, જે એક પ્રોમિસ પરત કરે છે જે કોમ્પોનન્ટમાં ઉકેલાય છે.


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

આ ઉદાહરણમાં, MyComponent ફક્ત ત્યારે જ લોડ થશે જ્યારે તે રેન્ડર થવાનું હશે.

૨. <Suspense> સાથે રેપિંગ

કારણ કે React.lazy() ડાયનેમિક ઇમ્પોર્ટ્સનો ઉપયોગ કરે છે, જે એસિંક્રોનસ છે, તમારે લેઝી-લોડેડ કોમ્પોનન્ટને <Suspense> કોમ્પોનન્ટ સાથે રેપ કરવાની જરૂર છે. <Suspense> કોમ્પોનન્ટ તમને કોમ્પોનન્ટ લોડ થતી વખતે ફોલબેક UI (દા.ત., લોડિંગ સ્પિનર) પ્રદર્શિત કરવાની મંજૂરી આપે છે.


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 {alt};
};

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" (અથવા સમાન) નામનો કોડ ચંક બનાવશે.

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

વાસ્તવિક-વિશ્વના ઉદાહરણો અને ઉપયોગના કેસો

રિએક્ટ એપ્લિકેશન્સના પ્રદર્શનને સુધારવા માટે લેઝી લોડિંગનો ઉપયોગ વિશાળ શ્રેણીના દૃશ્યોમાં કરી શકાય છે. અહીં કેટલાક ઉદાહરણો છે:

ઉદાહરણ: આંતરરાષ્ટ્રીય ઈ-કોમર્સ વેબસાઇટ

એક ઈ-કોમર્સ વેબસાઇટની કલ્પના કરો જે વૈશ્વિક સ્તરે ઉત્પાદનો વેચે છે. જુદા જુદા દેશોમાં જુદી જુદી કરન્સી, ભાષાઓ અને પ્રોડક્ટ કેટેલોગ હોઈ શકે છે. દરેક દેશ માટે તમામ ડેટા અપફ્રન્ટ લોડ કરવાને બદલે, તમે લેઝી લોડિંગનો ઉપયોગ કરીને વપરાશકર્તાના સ્થાન માટે વિશિષ્ટ ડેટા ફક્ત ત્યારે જ લોડ કરી શકો છો જ્યારે તેઓ સાઇટની મુલાકાત લે છે.


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