React Routeri laisa laadimisega seotud peamine probleem on see, et kui seda ei rakendata õigesti, võib see põhjustada jõudlusprobleeme. Laisk laadimine võib pikendada lehe esialgset laadimisaega, kuna iga komponendi kood tuleb laadida eraldi. Lisaks, kui komponenti ei kasutata sageli, ei pruugita seda üldse laadida, mille tulemuseks on ressursside raiskamine. Lõpuks on võimalikud ühilduvusprobleemid vanemate brauseritega, mis ei toeta laiska laadimist.
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. impordi React, { Suspense } kaustast 'react';
// See rida impordib Reacti teegist Reacti teegi ja Suspense'i komponendi.
2. importida { BrowserRouter as Router, Route, Switch } kaustast 'react-router-dom';
// See rida impordib komponendid BrowserRouter, Route ja Switch teegist react-router-dom.
3. const Home = React.lazy(() => import('./Home'));
// See rida loob konstandi nimega Home, mis kasutab Reacti laisa laadimise funktsiooni, et dünaamiliselt importida selle failiga samas kataloogis olevast failist (rakenduse komponent) komponendi nimega Home.
4. const Teave = React.lazy(() => import('./About'));
// See rida loob konstandi nimega About, mis kasutab laiska laadimist, et dünaamiliselt importida selle failiga samas kataloogis olevast failist (rakenduse komponent) komponent nimega About.
const Kontakt = React.lazy(() => import('./Contact')); // See rida loob konstandi nimega Kontakt, mis kasutab laiska laadimist, et dünaamiliselt importida selle failiga samas kataloogis olevast failist (rakenduse komponent) kontakt nimega komponent.
5. function App() { return ( // See on noolefunktsioon, mis tagastab varem imporditud ruuteri märgendisse pakitud JSX koodi
6.Laadimine ...
}> //See Suspense'i silt ümbritseb kõik meie marsruudid laadimise varurekvisiidiga… kui mõne marsruudi laadimine võtab aega
7. //Märgendi vahetamine tagab, et korraga renderdatakse ainult üks marsruut
8. //See marsruut renderdab kodukomponendi, kui täpne tee „/” vastab
9. //See marsruut renderdab About Component, kui tee „/about” on vastendatud
10. //See marsruut renderdab kontakti komponendi, kui tee “/kontakt” on sobitatud ) } ekspordi vaikerakendus; //Lõpuks sulgeme kõik sildid ja ekspordime oma rakenduse
Laisa koormuse probleem
Laisklaadimine on tehnika, mida kasutatakse teatud komponentide laadimise viivitamiseks, kuni neid vajatakse. See võib aidata parandada rakenduse jõudlust, laadides ainult seda, mis on igal ajahetkel vajalik. See võib aga olla probleemiks React Routeri kasutamisel, kuna see ei toeta laiska karbist väljalaadimist. Selle probleemi lahendamiseks peavad arendajad oma marsruudid käsitsi konfigureerima, et võimaldada aeglane laadimine. See võib hõlmata dünaamilise importimise ja koodi jagamise seadistamist, mis võivad olla keerulised ja aeganõudvad toimingud. Lisaks võib osutuda vajalikuks kasutada mõningaid teeke, näiteks React Loadable, et React Routeriga laiska laadimist õigesti rakendada.
Mis on React laisk koormus
React Lazy load on React Routeri funktsioon, mis võimaldab nõudmisel komponente laadida. See tähendab, et selle asemel, et laadida kõiki komponente korraga, laaditakse vajadusel vaid vajalikud komponendid. See aitab vähendada lehe esialgset laadimisaega ja parandada jõudlust. See võimaldab ka koodi paremat organiseerimist ja probleemide eraldamist, kuna iga komponenti saab laadida iseseisvalt.
Kuidas kasutada ruuteris funktsiooni React lazy
React lazy on Reacti funktsioon, mis võimaldab komponente dünaamiliselt importida. See tähendab, et selle asemel, et kõiki komponente ette laadida, saate neid vajadusel laadida. See võib olla kasulik jõudluse optimeerimiseks suurtes rakendustes.
Reacti ruuteris funktsiooni React lazy kasutamiseks React Routeris peate laisklaaditava komponendi mähkima dünaamilise impordikõnega. Näiteks:
const MyComponent = React.laiszy(() => import('./MyComponent'));
Seejärel sisestage marsruutide määratlemisel komponent MyComponent lihtsalt marsruudi komponenti järgmiselt:
See paneb React Routeri sellele marsruudile navigeerimisel dünaamiliselt komponendi MyComponent laadima.
