Hlavním problémem souvisejícím s líným načítáním React Router je to, že může způsobit problémy s výkonem, pokud není správně implementováno. Líné načítání může prodloužit počáteční dobu načítání stránky, protože kód pro každou komponentu je třeba načíst samostatně. Navíc, pokud komponenta není používána často, nemusí být vůbec načtena, což má za následek plýtvání zdroji. A konečně, existují potenciální problémy s kompatibilitou se staršími prohlížeči, které nepodporují líné načítání.
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 } z 'react';
// Tento řádek importuje knihovnu React a komponentu Suspense z knihovny React.
2. import { BrowserRouter as Router, Route, Switch } z 'react-router-dom';
// Tento řádek importuje komponenty BrowserRouter, Route a Switch z knihovny respond-router-dom.
3. const Home = React.lazy(() => import('./Home'));
// Tento řádek vytváří konstantu s názvem Home, která používá funkci líného načítání React k dynamickému importu komponenty s názvem Home ze souboru ve stejném adresáři jako tento soubor (komponenta App).
4. const About = React.lazy(() => import('./About'));
// Tento řádek vytvoří konstantu nazvanou About, která používá líné načítání k dynamickému importu komponenty nazvané About ze souboru ve stejném adresáři jako tento soubor (komponenta App).
const Contact = React.lazy(() => import('./Contact')); // Tento řádek vytvoří konstantu nazvanou Contact, která používá líné načítání k dynamickému importu komponenty nazvané Contact ze souboru ve stejném adresáři jako tento soubor (komponenta App).
5. function App() { return ( // Toto je funkce šipky, která vrací kód JSX zabalený do značky Router, která byla importována dříve
6.Načítání…
}> //Tato značka Suspense obaluje všechny naše trasy záložními rekvizitami Načítání... pokud načítání nějaké trasy trvá dlouho
7. //Switch tag zajistí, že bude vykreslena pouze jedna trasa najednou
8. //Tato trasa vykreslí domovskou komponentu, když se přesná cesta „/“ shoduje
9. //Tato trasa vykreslí komponentu About, když se shoduje cesta „/about“.
10. //Tato trasa vykreslí komponentu kontaktu, když se shoduje cesta „/contact“ ) } export default App; //Nakonec zavřeme všechny značky a exportujeme naši aplikaci
Problém s líným načítáním
Líné načítání je technika používaná ke zpoždění načítání určitých komponent, dokud nejsou potřeba. To může pomoci zlepšit výkon aplikace tím, že načte pouze to, co je v daném okamžiku nezbytné. To však může být problém při použití React Router, protože nepodporuje líné načítání po vybalení z krabice. Chcete-li tento problém vyřešit, musí vývojáři ručně nakonfigurovat své trasy tak, aby umožňovaly opožděné načítání. To může zahrnovat nastavení dynamických importů a rozdělení kódu, což mohou být složité a časově náročné úkoly. Navíc může být nutné použít některé knihovny, jako je React Loadable, aby bylo možné správně implementovat líné načítání pomocí React Router.
Co je React lazy load
React lazy load je funkce React Router, která umožňuje načítání komponent na vyžádání. To znamená, že místo načítání všech komponent najednou se v případě potřeby načítají pouze potřebné komponenty. To pomáhá zkrátit počáteční dobu načítání stránky a zlepšit výkon. Umožňuje také lepší organizaci kódu a oddělení problémů, protože každou komponentu lze načíst nezávisle.
Jak mohu použít React lazy na mém routeru
React lazy je funkce Reactu, která umožňuje dynamicky importovat komponenty. To znamená, že místo načítání všech komponent předem je můžete načíst podle potřeby. To může být užitečné pro optimalizaci výkonu ve velkých aplikacích.
Chcete-li použít React lazy na vašem routeru v React Router, musíte komponentu, kterou chcete líně načíst, zabalit do volání dynamického importu. Například:
const MyComponent = React.lazy(() => import('./MyComponent'));
Poté při definování tras jednoduše předejte komponentu MyComponent do komponenty Route takto:
To způsobí, že React Router dynamicky načte komponentu MyComponent při navigaci na tuto trasu.
