Hovedproblemet i forbindelse med React Routers doven indlæsning er, at det kan forårsage ydeevneproblemer, hvis det ikke implementeres korrekt. Doven indlæsning kan øge den indledende sideindlæsningstid, da koden for hver komponent skal indlæses separat. Derudover, hvis en komponent ikke bruges ofte, vil den muligvis aldrig blive indlæst overhovedet, hvilket resulterer i spildte ressourcer. Endelig er der potentielle kompatibilitetsproblemer med ældre browsere, der ikke understøtter doven indlæsning.
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 linje importerer React-biblioteket og Suspense-komponenten fra React-biblioteket.
2. importer { BrowserRouter som router, rute, switch } fra 'react-router-dom';
// Denne linje importerer BrowserRouter-, Route- og Switch-komponenterne fra react-router-dom-biblioteket.
3. const Home = React.lazy(() => import('./Home'));
// Denne linje opretter en konstant kaldet Home, der bruger Lazy loading-funktionen i React til dynamisk at importere en komponent kaldet Home fra en fil i samme mappe som denne fil (App-komponenten).
4. const About = React.lazy(() => import('./Om'));
// Denne linje opretter en konstant kaldet About, der bruger lazy loading til dynamisk at importere en komponent kaldet About fra en fil i samme mappe som denne fil (App-komponenten).
const Contact = React.lazy(() => import('./Kontakt')); // Denne linje opretter en konstant kaldet Contact, der bruger lazy loading til dynamisk at importere en komponent kaldet Contact fra en fil i samme mappe som denne fil (App-komponenten).
5. funktion App() { return ( // Dette er en pilefunktion, som returnerer JSX-kode pakket ind i router-tag, som er importeret tidligere
6.Indlæser…
}> //Dette Suspense-tag omslutter alle vores ruter med reserve-rekvisitter fra Loading... hvis en rute tager tid at indlæse
7. //Switch tag vil sørge for, at kun én rute gengives på én gang
8. //Denne rute vil gengive Home Component, når den nøjagtige sti "/" matches
9. //Denne rute vil gengive About Component, når stien "/about" matches
10. //Denne rute vil gengive kontaktkomponent, når stien "/kontakt" matches ) } eksporter standardapp; //Til sidst lukker vi alle tags og eksporterer vores app
Problem med doven belastning
Lazy loading er en teknik, der bruges til at forsinke indlæsningen af visse komponenter, indtil de er nødvendige. Dette kan hjælpe med at forbedre ydeevnen af en applikation ved kun at indlæse det nødvendige på et givet tidspunkt. Dette kan dog være et problem ved brug af React Router, da den ikke understøtter doven læsning ud af æsken. For at omgå dette problem skal udviklere manuelt konfigurere deres ruter for at aktivere doven indlæsning. Dette kan involvere opsætning af dynamisk import og kodeopdeling, hvilket kan være komplekse og tidskrævende opgaver. Derudover kan det være nødvendigt at bruge nogle biblioteker såsom React Loadable for korrekt at implementere doven indlæsning med React Router.
Hvad er React lazy load
React lazy load er en funktion i React Router, der tillader indlæsning af komponenter efter behov. Det betyder, at i stedet for at indlæse alle komponenter på én gang, indlæses kun de nødvendige komponenter, når det er nødvendigt. Dette hjælper med at reducere den indledende sideindlæsningstid og forbedre ydeevnen. Det giver også mulighed for bedre kodeorganisering og adskillelse af bekymringer, da hver komponent kan indlæses uafhængigt.
Hvordan bruger jeg React lazy på min router
React lazy er en funktion i React, der giver dig mulighed for dynamisk at importere komponenter. Det betyder, at i stedet for at indlæse alle komponenterne på forhånd, kan du indlæse dem efter behov. Dette kan være nyttigt til at optimere ydeevnen i store applikationer.
For at bruge React lazy på din router i React Router, skal du pakke den komponent, du vil lazy-loade, ind i et dynamisk importopkald. For eksempel:
const MyComponent = React.lazy(() => import('./MyComponent'));
Når du derefter definerer dine ruter, skal du blot overføre MyComponent-komponenten til Route-komponenten sådan:
Dette vil få React Router til dynamisk at indlæse MyComponent-komponenten, når du navigerer til den rute.
