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