Glavni problem povezan s lijenim učitavanjem React Routera jest to što može uzrokovati probleme s izvedbom ako se ne implementira ispravno. Lijeno učitavanje može produžiti početno vrijeme učitavanja stranice jer se kôd za svaku komponentu mora učitati zasebno. Osim toga, ako se komponenta ne koristi često, možda se uopće neće učitati, što će rezultirati uzaludnim trošenjem resursa. Konačno, postoje potencijalni problemi kompatibilnosti sa starijim preglednicima koji ne podržavaju odgodno učitavanje.
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. import React, { Suspense } iz 'react';
// Ovaj redak uvozi biblioteku React i komponentu Suspense iz biblioteke React.
2. import { BrowserRouter kao Router, Route, Switch } iz 'react-router-dom';
// Ovaj redak uvozi komponente BrowserRouter, Route i Switch iz biblioteke react-router-dom.
3. const Home = React.lazy(() => import('./Home'));
// Ovaj redak stvara konstantu pod nazivom Home koja koristi značajku odlijepljenog učitavanja Reacta za dinamički uvoz komponente pod nazivom Home iz datoteke u istom direktoriju kao i ova datoteka (komponenta aplikacije).
4. const About = React.lazy(() => import('./About'));
// Ovaj redak stvara konstantu pod nazivom About koja koristi odlagano učitavanje za dinamički uvoz komponente pod nazivom About iz datoteke u istom direktoriju kao i ova datoteka (komponenta aplikacije).
const Kontakt = React.lazy(() => import('./Kontakt')); // Ovaj redak stvara konstantu pod nazivom Kontakt koja koristi odlagano učitavanje za dinamički uvoz komponente pod nazivom Kontakt iz datoteke u istom direktoriju kao i ova datoteka (komponenta aplikacije).
5. funkcija App() { return ( // Ovo je funkcija strelice koja vraća JSX kod zamotan u oznaku usmjerivača koja je ranije uvezena
6.Učitavanje ...
}> //Ova Suspense oznaka obavija sve naše rute rezervnim propsima učitavanja... ako bilo kojoj ruti treba vremena za učitavanje
7. //Switch tag će osigurati da se samo jedna ruta iscrtava odjednom
8. //Ova će ruta prikazati početnu komponentu kada se pronađe točna staza “/”.
9. //Ova ruta će prikazati O komponenti kada se nađe staza “/about”.
10. //Ova će ruta prikazati komponentu kontakta kada se nađe staza “/contact” ) } export default App; //Napokon zatvaramo sve oznake i izvozimo našu aplikaciju
Problem s lijenim učitavanjem
Lijeno učitavanje je tehnika koja se koristi za odgodu učitavanja određenih komponenti dok ne budu potrebne. To može poboljšati izvedbu aplikacije učitavanjem samo onoga što je u datom trenutku potrebno. Međutim, to može predstavljati problem kada koristite React Router, jer ne podržava lijeno učitavanje odmah. Da bi riješili ovaj problem, programeri moraju ručno konfigurirati svoje rute kako bi omogućili odgođeno učitavanje. To može uključivati postavljanje dinamičkog uvoza i dijeljenje koda, što može biti složen i dugotrajan zadatak. Dodatno, neke biblioteke kao što je React Loadable možda će se trebati koristiti kako bi se ispravno implementiralo lijeno učitavanje s React Routerom.
Što je React lazy load
React lazy load značajka je React Routera koja omogućuje učitavanje komponenti na zahtjev. To znači da umjesto učitavanja svih komponenti odjednom, samo potrebne komponente se učitavaju kada je potrebno. To pomaže smanjiti početno vrijeme učitavanja stranice i poboljšati izvedbu. Također omogućuje bolju organizaciju koda i odvajanje problema, jer se svaka komponenta može učitati neovisno.
Kako mogu koristiti React lazy na svom ruteru
React lazy je značajka Reacta koja vam omogućuje dinamički uvoz komponenti. To znači da umjesto učitavanja svih komponenti unaprijed, možete ih učitati po potrebi. To može biti korisno za optimiziranje performansi u velikim aplikacijama.
Kako biste koristili React Lazy na svom usmjerivaču u React Routeru, trebate zamotati komponentu koju želite lijeno učitati u dinamički poziv za uvoz. Na primjer:
const MyComponent = React.lazy(() => import('./MyComponent'));
Zatim, kada definirate svoje rute, jednostavno proslijedite MyComponent komponentu u Route komponentu ovako:
To će uzrokovati da React Router dinamički učita komponentu MyComponent prilikom navigacije do te rute.
