Det största problemet med React Routers lat laddning är att det kan orsaka prestandaproblem om det inte implementeras korrekt. Lazy loading kan öka den initiala sidladdningstiden, eftersom koden för varje komponent måste laddas separat. Dessutom, om en komponent inte används ofta, kanske den aldrig laddas alls, vilket leder till slöseri med resurser. Slutligen finns det potentiella kompatibilitetsproblem med äldre webbläsare som inte stöder lazy loading.
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. importera React, { Suspense } från 'react';
// Den här raden importerar React-biblioteket och Suspense-komponenten från React-biblioteket.
2. importera { BrowserRouter som Router, Route, Switch } från 'react-router-dom';
// Den här raden importerar BrowserRouter, Route och Switch-komponenterna från react-router-dom-biblioteket.
3. const Home = React.lazy(() => import('./Home'));
// Den här raden skapar en konstant som heter Home som använder lazy loading-funktionen i React för att dynamiskt importera en komponent som heter Home från en fil i samma katalog som den här filen (App-komponenten).
4. const About = React.lazy(() => import('./About'));
// Den här raden skapar en konstant som heter About som använder lazy loading för att dynamiskt importera en komponent som heter About från en fil i samma katalog som den här filen (App-komponenten).
const Contact = React.lazy(() => import('./Contact')); // Den här raden skapar en konstant som heter Contact som använder lazy loading för att dynamiskt importera en komponent som heter Contact från en fil i samma katalog som den här filen (App-komponenten).
5. funktion App() { return ( // Detta är en pilfunktion som returnerar JSX-kod insvept i routertaggen som har importerats tidigare
6.Läser in…
}> //Denna suspense-tagg omsluter alla våra rutter med reservtillbehör från Loading... om någon rutt tar tid att ladda
7. //Switch tag kommer att se till att endast en rutt renderas på en gång
8. //Denna rutt kommer att återge Home Component när den exakta sökvägen "/" matchas
9. //Denna rutt kommer att återge About Component när sökvägen "/about" matchas
10. //Denna rutt kommer att återge kontaktkomponent när sökvägen “/contact” matchas ) } exportera standardapp; //Äntligen stänger vi alla taggar och exporterar vår app
Problem med lat last
Lazy loading är en teknik som används för att fördröja lastningen av vissa komponenter tills de behövs. Detta kan hjälpa till att förbättra prestandan för en applikation genom att bara ladda det som är nödvändigt vid varje given tidpunkt. Detta kan dock vara ett problem när du använder React Router, eftersom den inte stöder lazy loading out of the box. För att kringgå det här problemet måste utvecklare manuellt konfigurera sina rutter för att möjliggöra lazy loading. Detta kan innebära att sätta upp dynamiska importer och koddelning, vilket kan vara komplexa och tidskrävande uppgifter. Dessutom kan vissa bibliotek som React Loadable behöva användas för att korrekt implementera lazy loading med React Router.
Vad är React lazy load
React lazy load är en funktion hos React Router som gör det möjligt att ladda komponenter på begäran. Detta innebär att istället för att ladda alla komponenter på en gång, laddas bara de nödvändiga komponenterna när det behövs. Detta hjälper till att minska den initiala sidladdningstiden och förbättra prestandan. Det möjliggör också bättre kodorganisation och separation av problem, eftersom varje komponent kan laddas oberoende.
Hur använder jag React lazy på min router
React lazy är en funktion i React som låter dig importera komponenter dynamiskt. Det betyder att du istället för att ladda alla komponenter i förväg kan ladda dem efter behov. Detta kan vara användbart för att optimera prestanda i stora applikationer.
För att kunna använda React lazy på din router i React Router måste du linda in komponenten du vill lazy-loada i ett dynamiskt importanrop. Till exempel:
const MyComponent = React.lazy(() => import('./MyComponent'));
Sedan, när du definierar dina rutter, skicka helt enkelt MyComponent-komponenten till Route-komponenten så här:
Detta kommer att få React Router att dynamiskt ladda MyComponent-komponenten när du navigerar till den rutten.
