Babban matsalar da ke da alaƙa da React Router lazy loading shine cewa yana iya haifar da lamuran aiki idan ba a aiwatar da su daidai ba. Lalaci na iya ƙara lokacin ɗaukar shafin farko, kamar yadda lambar kowane ɓangaren ke buƙatar lodawa daban. Bugu da ƙari, idan ba a yi amfani da wani abu akai-akai ba, ƙila ba za a taɓa loda shi ba kwata-kwata, yana haifar da ɓarnatar kayan aiki. A ƙarshe, akwai yuwuwar al'amurran da suka shafi dacewa tare da tsofaffin masu bincike waɗanda basa goyan bayan loda ƙasa.
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router> ); } export default App;
1. shigo da React, {Suspense} daga 'react';
// Wannan layin yana shigo da ɗakin karatu na React da bangaren Suspense daga ɗakin karatu na React.
2. shigo da {BrowserRouter azaman Mai ba da hanya tsakanin hanyoyin sadarwa, Hanya, Sauya} daga 'react-router-dom';
// Wannan layin yana shigo da kayan aikin BrowserRouter, Route da Canjawa daga ɗakin karatu na react-router-dom.
3. const Gida = React.lazy (() => shigo da ('./Home'));
// Wannan layin yana ƙirƙira kullun da ake kira Gida wanda ke amfani da fasalin ɗora nauyi na React don shigo da wani bangaren da ake kira Gida cikin ƙarfi daga fayil a cikin directory iri ɗaya da wannan fayil ɗin (ɓangaren App).
4. const Game da = React.lazy (() => shigo da ('./About'));
// Wannan layin yana haifar da akai-akai da ake kira Game da yana amfani da lazy loading don shigo da wani bangaren da ake kira About daga fayil a cikin kundin adireshi iri ɗaya da wannan fayil (ɓangaren App).
const Contact = React.lazy (() => shigo da ('./Contact')); // Wannan layin yana haifar da madaidaicin da ake kira Contact wanda ke amfani da lazy loading don shigo da wani bangaren da ake kira Contact daga fayil a cikin directory iri ɗaya da wannan fayil (ɓangaren App).
5. aiki App() {dawowa ( // Wannan aikin kibiya ne wanda ke dawo da lambar JSX da aka nannade cikin tag na Router wanda aka shigo da shi a baya
6.Loading ...
}> // Wannan Tambarin Suspense yana lulluɓe duk hanyoyinmu tare da abubuwan dawowa na Loading… idan kowace hanya ta ɗauki lokaci don ɗauka.
7. // Canja alamar zai tabbatar da cewa hanya ɗaya ce kawai aka yi lokaci ɗaya
8. // Wannan Hanyar za ta sanya Maɓallin Gida lokacin da ainihin hanyar "/" ta dace
9. // Wannan Hanyar za ta ba da Game da Bangaren lokacin da hanyar "/game da" ta dace
10. // Wannan Hanyar za ta ba da Abubuwan Tuntuɓi lokacin da hanyar “/ lamba” ta dace ) } Export tsoho App; // A ƙarshe muna rufe duk tags kuma mu fitar da app ɗin mu
Matsalar nauyi mai kasala
Lazy loading wata dabara ce da ake amfani da ita wajen jinkirta loda wasu abubuwan har sai an bukace su. Wannan zai iya taimakawa inganta aikin aikace-aikacen ta hanyar loda abin da ya dace kawai a kowane lokaci. Koyaya, wannan na iya zama matsala yayin amfani da React Router, saboda baya goyan bayan ɗora nauyi daga cikin akwatin. Don yin aiki a kan wannan batu, masu haɓakawa dole ne su tsara hanyoyin su da hannu don ba da damar yin lodin kasala. Wannan na iya haɗawa da saita shigo da kaya masu ƙarfi da rarrabuwar lamba, waɗanda zasu iya zama ayyuka masu rikitarwa da ɗaukar lokaci. Bugu da kari, wasu dakunan karatu kamar React Loadable na iya buƙatar amfani da su don aiwatar da ɗorawa mara nauyi da kyau tare da React Router.
Menene React lazy load
React lazy load siffa ce ta React Router wanda ke ba da damar loda abubuwan abubuwan da ake buƙata. Wannan yana nufin cewa maimakon loda duk abubuwan da aka gyara lokaci guda, abubuwan da ake buƙata kawai ana loda su lokacin da ake buƙata. Wannan yana taimakawa wajen rage lokacin ɗaukar nauyin shafin farko da inganta aiki. Hakanan yana ba da damar mafi kyawun tsarin lambar da raba damuwa, saboda kowane ɓangaren ana iya loda shi da kansa.
Yaya zan yi amfani da React lazy akan na'ura mai ba da hanya tsakanin hanyoyin sadarwa
React kasala siffa ce ta React wacce ke ba ku damar shigo da abubuwan da suka dace. Wannan yana nufin cewa maimakon loda duk abubuwan da aka gyara a gaba, zaku iya loda su kamar yadda ake buƙata. Wannan na iya zama da amfani don inganta aiki a manyan aikace-aikace.
Domin amfani da React lazy a kan na'ura mai ba da hanya tsakanin hanyoyin sadarwa a cikin React Router, kuna buƙatar kunsa sashin da kuke son saukarwa-lodawa a cikin kira mai ƙarfi na shigo da kaya. Misali:
const MyComponent = React.lazy (() => shigo da ('./MyComponent'));
Bayan haka, lokacin da kuke bayyana hanyoyinku, kawai ku wuce sashin MyComponent zuwa bangaren Hanyar kamar haka:
Wannan zai sa React Router ya ɗora kayan MyComponent a hankali yayin tafiya zuwa waccan hanyar.
