રીએક્ટ લેઝી લોડિંગ: કમ્પોનન્ટ કોડ સ્પ્લિટિંગ વડે પર્ફોર્મન્સને વેગ આપો

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

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

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

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

લેઝી લોડિંગ અને કોડ સ્પ્લિટિંગના ફાયદા

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

React.lazy અને Suspense વડે રીએક્ટ લેઝી લોડિંગનો અમલ

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

પગલું ૧: React.lazy સાથે ડાયનેમિક ઇમ્પોર્ટ્સ

React.lazy એક ફંક્શન લે છે જે import() ને કૉલ કરે છે. import() ફંક્શન એક ડાયનેમિક ઇમ્પોર્ટ છે જે એક પ્રોમિસ (Promise) પરત કરે છે, જે એક મોડ્યુલમાં રિઝોલ્વ થાય છે જેમાં તમે જે કમ્પોનન્ટને લેઝી લોડ કરવા માંગો છો તે શામેલ હોય છે.

import React, { lazy, Suspense } from 'react';

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

આ ઉદાહરણમાં, MyComponent ત્યાં સુધી લોડ થતો નથી જ્યાં સુધી તેને રેન્ડર કરવામાં ન આવે. import('./MyComponent') સ્ટેટમેન્ટ ./MyComponent ફાઇલમાંથી કમ્પોનન્ટને ડાયનેમિક રીતે ઇમ્પોર્ટ કરે છે. નોંધ લો કે પાથ વર્તમાન ફાઇલની સાપેક્ષ છે.

પગલું ૨: લોડિંગ સ્ટેટ્સને હેન્ડલ કરવા માટે Suspense નો ઉપયોગ

કારણ કે લેઝી લોડિંગમાં કમ્પોનન્ટ્સનું અસિંક્રોનસ લોડિંગ શામેલ છે, તમારે લોડિંગ સ્ટેટને હેન્ડલ કરવા અને કમ્પોનન્ટ ફેચ થતી વખતે ફોલબેક UI પ્રદર્શિત કરવાની રીતની જરૂર છે. અહીં Suspense કામ આવે છે. Suspense એ એક રીએક્ટ કમ્પોનન્ટ છે જે તમને તેના ચિલ્ડ્રન રેન્ડર થવા માટે તૈયાર ન થાય ત્યાં સુધી રેન્ડરિંગને "સસ્પેન્ડ" કરવા દે છે. તે એક fallback પ્રોપ લે છે, જે સ્પષ્ટ કરે છે કે ચિલ્ડ્રન લોડ થતી વખતે કયું UI રેન્ડર કરવું.

import React, { lazy, Suspense } from 'react';

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

function App() {
  return (
    Loading...

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    
      Loading...