Suurin React Routerin laiskalataukseen liittyvä ongelma on, että se voi aiheuttaa suorituskykyongelmia, jos sitä ei toteuteta oikein. Hidas lataus voi pidentää sivun alkulatausaikaa, koska kunkin komponentin koodi on ladattava erikseen. Lisäksi, jos komponenttia ei käytetä usein, sitä ei ehkä koskaan ladata ollenkaan, mikä johtaa resurssien hukkaan. Lopuksi, mahdollisia yhteensopivuusongelmia vanhemmissa selaimissa, jotka eivät tue laiskalatausta.
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. tuo React, { Suspense } kohdasta "react";
// Tämä rivi tuo React-kirjaston ja Suspense-komponentin React-kirjastosta.
2. tuo { BrowserRouter as Router, Route, Switch } hakemistosta 'react-router-dom';
// Tämä rivi tuo BrowserRouter-, Route- ja Switch-komponentit react-router-dom-kirjastosta.
3. const Home = React.lazy(() => import('./Home'));
// Tämä rivi luo vakion nimeltä Home, joka käyttää Reactin laiskalatausominaisuutta tuodakseen dynaamisesti Home-nimisen komponentin tiedostosta, joka on samassa hakemistossa kuin tämä tiedosto (sovelluskomponentti).
4. const Tietoja = React.lazy(() => import('./About'));
// Tämä rivi luo vakion nimeltä Tietoja, joka käyttää laiskalatausta tuomaan dynaamisesti About-nimisen komponentin tiedostosta, joka on samassa hakemistossa kuin tämä tiedosto (sovelluskomponentti).
const Yhteystiedot = React.lazy(() => import('./Contact')); // Tämä rivi luo vakion nimeltä Contact, joka käyttää laiskalatausta tuodakseen dynaamisesti Yhteystiedot-nimisen komponentin tiedostosta, joka on samassa hakemistossa kuin tämä tiedosto (sovelluskomponentti).
5. function App() { return ( // Tämä on nuolifunktio, joka palauttaa JSX-koodin käärittynä aiemmin tuotuun reititintunnisteeseen
6.Ladataan…
}> //Tämä jännitystunniste kääri kaikki reittimme Loadingin vararekvisiittiin… jos jonkin reitin lataaminen vie aikaa
7. //Switch tag varmistaa, että vain yksi reitti hahmonnetaan kerralla
8. //Tämä reitti hahmontaa kotikomponentin, kun tarkka polku “/” on täsmäävä
9. //Tämä reitti renderöi Tietoja komponentista, kun polku "/about" löytyy
10. //Tämä reitti hahmontaa Yhteystietokomponentin, kun polku “/contact” osuu kohdalleen ) } vie oletussovellus; //Lopuksi suljemme kaikki tunnisteet ja viemme sovelluksemme
Laiska latausongelma
Lazy loading on tekniikka, jota käytetään viivyttämään tiettyjen komponenttien lataamista, kunnes niitä tarvitaan. Tämä voi auttaa parantamaan sovelluksen suorituskykyä lataamalla vain sen, mikä on tarpeen kulloinkin. Tämä voi kuitenkin olla ongelma käytettäessä React Routeria, koska se ei tue laiska lataamista laatikosta. Tämän ongelman kiertämiseksi kehittäjien on määritettävä reitit manuaalisesti mahdollistamaan laiska lataus. Tämä voi sisältää dynaamisten tuontien määrittämistä ja koodin jakamista, mikä voi olla monimutkaisia ja aikaa vieviä tehtäviä. Lisäksi joitain kirjastoja, kuten React Loadable, on ehkä käytettävä, jotta laiska lataus React Routerilla voidaan toteuttaa oikein.
Mikä on React laiska kuorma
React Lazy load on React Routerin ominaisuus, joka mahdollistaa komponenttien lataamisen tarpeen mukaan. Tämä tarkoittaa, että sen sijaan, että kaikki komponentit ladataan kerralla, vain tarvittavat komponentit ladataan tarvittaessa. Tämä auttaa lyhentämään sivun alkulatausaikaa ja parantamaan suorituskykyä. Se mahdollistaa myös paremman koodin organisoinnin ja huolenaiheiden erottamisen, koska jokainen komponentti voidaan ladata itsenäisesti.
Kuinka käytän React lazyä reitittimessäni
React lazy on Reactin ominaisuus, jonka avulla voit tuoda komponentteja dynaamisesti. Tämä tarkoittaa, että sen sijaan, että lataat kaikki komponentit etukäteen, voit ladata ne tarpeen mukaan. Tästä voi olla hyötyä suorituskyvyn optimoinnissa suurissa sovelluksissa.
Jotta voit käyttää React lazy -toimintoa reitittimessäsi React Routerissa, sinun on käärittävä ladattava komponentti dynaamiseen tuontikutsuun. Esimerkiksi:
const MyComponent = React.lazy(() => tuonti('./MyComponent'));
Sitten, kun määrität reittejäsi, siirrä MyComponent-komponentti Route-komponenttiin seuraavasti:
Tämä saa React Routerin lataamaan dynaamisesti MyComponent-komponentin navigoidessaan kyseiselle reitille.
