Hovedproblemet knyttet til lat lasting av React Router er at det kan forårsake ytelsesproblemer hvis det ikke implementeres riktig. Lazy lasting kan øke den første sideinnlastingstiden, siden koden for hver komponent må lastes inn separat. I tillegg, hvis en komponent ikke brukes ofte, kan den aldri lastes i det hele tatt, noe som resulterer i bortkastede ressurser. Til slutt er det potensielle kompatibilitetsproblemer med eldre nettlesere som ikke støtter lat lasting.
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. importer React, { Suspense } fra 'react';
// Denne linjen importerer React-biblioteket og Suspense-komponenten fra React-biblioteket.
2. importer { BrowserRouter as Router, Route, Switch } fra 'react-router-dom';
// Denne linjen importerer BrowserRouter, Route og Switch-komponentene fra react-router-dom-biblioteket.
3. const Hjem = React.lazy(() => import('./Hjem'));
// Denne linjen oppretter en konstant kalt Home som bruker lazy loading-funksjonen til React for å dynamisk importere en komponent kalt Home fra en fil i samme katalog som denne filen (App-komponenten).
4. const About = React.lazy(() => import('./About'));
// Denne linjen lager en konstant kalt About som bruker lazy loading for å dynamisk importere en komponent kalt About fra en fil i samme katalog som denne filen (App-komponenten).
const Contact = React.lazy(() => import('./Contact')); // Denne linjen lager en konstant kalt Contact som bruker lazy loading for dynamisk å importere en komponent kalt Contact fra en fil i samme katalog som denne filen (App-komponenten).
5. funksjon App() { return ( // Dette er en pilfunksjon som returnerer JSX-kode pakket inn i rutertaggen som er importert tidligere
6.Laster ...
}> //Denne suspense-taggen omslutter alle rutene våre med reserverekvisitter fra Loading ... hvis noen rute tar tid å laste
7. //Switch tag vil sørge for at bare én rute blir gjengitt på en gang
8. //Denne ruten vil gjengi Home Component når den nøyaktige banen "/" er matchet
9. //Denne ruten vil gjengi About Component når banen "/about" matches
10. //Denne ruten vil gjengi kontaktkomponent når banen “/contact” matches ) } eksporter standardapp; //Til slutt lukker vi alle tagger og eksporterer appen vår
Problem med lat belastning
Lazy loading er en teknikk som brukes til å utsette lasting av visse komponenter til de er nødvendige. Dette kan bidra til å forbedre ytelsen til en applikasjon ved kun å laste inn det som er nødvendig til enhver tid. Dette kan imidlertid være et problem når du bruker React Router, siden den ikke støtter lat lasting ut av esken. For å omgå dette problemet må utviklere manuelt konfigurere rutene sine for å aktivere lat lasting. Dette kan innebære å sette opp dynamisk import og kodedeling, som kan være komplekse og tidkrevende oppgaver. I tillegg kan det hende at noen biblioteker som React Loadable må brukes for å kunne implementere lat lasting med React Router.
Hva er React lazy load
React lazy load er en funksjon i React Router som tillater lasting av komponenter på forespørsel. Dette betyr at i stedet for å laste inn alle komponentene på en gang, blir kun de nødvendige komponentene lastet inn når det er nødvendig. Dette bidrar til å redusere den første sideinnlastingstiden og forbedre ytelsen. Det gir også mulighet for bedre kodeorganisering og separasjon av bekymringer, ettersom hver komponent kan lastes uavhengig.
Hvordan bruker jeg React lazy på ruteren min
React lazy er en funksjon i React som lar deg importere komponenter dynamisk. Dette betyr at i stedet for å laste alle komponentene på forhånd, kan du laste dem etter behov. Dette kan være nyttig for å optimalisere ytelsen i store applikasjoner.
For å bruke React lazy på ruteren din i React Router, må du pakke inn komponenten du vil lazy-loade i et dynamisk importanrop. For eksempel:
const MyComponent = React.lazy(() => import('./MyComponent'));
Deretter, når du definerer rutene dine, sender du ganske enkelt MyComponent-komponenten inn i rute-komponenten slik:
Dette vil få React Router til å dynamisk laste MyComponent-komponenten når du navigerer til den ruten.
