Ang pangunahing problema na nauugnay sa React Router v6 lazy suspense ay hindi pa ito ganap na sinusuportahan ng lahat ng mga browser. Nangangahulugan ito na maaaring makaranas ang mga user ng mga isyu kapag sinusubukang i-access ang ilang partikular na page o feature sa mga website gamit ang Lazy Suspense ng React Router v6. Bukod pa rito, mayroon pa ring ilang mga bug at isyu sa pagganap na kailangang matugunan bago ito magamit sa mga kapaligiran ng produksyon. Sa wakas, ang API para sa tamad na pag-load ng mga bahagi gamit ang Suspense ay nasa maagang yugto pa rin nito at maaaring mangailangan ng karagdagang oras ng pag-develop upang matiyak ang pagiging tugma sa mga kasalukuyang application.
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 AppRouter() {
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 AppRouter;
1. Ini-import ng code na ito ang library ng React, gayundin ang bahagi ng Suspense mula sa React, at ang mga bahagi ng BrowserRouter, Route, at Switch mula sa react-router-dom.
2. Tinutukoy nito ang tatlong bahagi (Home, About, Contact) gamit ang lazy loading feature ng React upang i-import ang mga ito mula sa kani-kanilang mga file.
3. Ang AppRouter function ay tinukoy na nagbabalik ng Router component na naglalaman ng Suspense component na may Switch component sa loob nito.
4. Sa loob ng bahagi ng Switch ay may tatlong bahagi ng Ruta na ang bawat isa ay nagre-render ng isa sa mga na-import na bahagi kapag ang kani-kanilang mga path ay tumugma sa URL (hal., '/' para sa Home).
5. Panghuli, ang AppRouter ay na-export upang ito ay magamit sa ibang lugar sa application.
Paano mo ginagamit ang lazy loading sa react router v6
v6
Ang lazy loading ay isang pamamaraan na ginagamit upang ipagpaliban ang pag-load ng ilang mga bahagi hanggang sa kailanganin ang mga ito. Sa React Router v6, ang lazy loading ay maaaring makamit sa pamamagitan ng paggamit ng dynamic na import() syntax. Binibigyang-daan ka ng syntax na ito na hatiin ang iyong code sa maraming mga bundle na maaaring i-load kapag hinihiling o kahanay. Nakakatulong ito na bawasan ang paunang laki ng bundle at pahusayin ang performance. Para gumamit ng lazy loading gamit ang React Router v6, dapat mong balutin ang component na gusto mong lazy load sa isang dynamic na import() na tawag. Ang import() na tawag ay magbabalik ng isang pangako na malulutas kapag ang bahagi ay na-load at handa nang i-render.
Ano ang suspense at tamad sa reaksyon
Ang suspense sa React Router ay isang paraan upang maantala ang pag-load ng isang ruta hanggang sa matugunan ang ilang kundisyon. Magagamit ito upang mapabuti ang pagganap ng isang application sa pamamagitan lamang ng paglo-load ng mga ruta kapag kinakailangan ang mga ito. Halimbawa, kung ang isang user ay nagna-navigate sa isang pahina na nangangailangan ng pagpapatunay, ang ruta ay maaaring maantala hanggang sa makumpleto ang pagpapatunay.
Ang tamad na pag-load sa React Router ay nagbibigay-daan para sa mga bahagi na mai-load nang asynchronous kapag kailangan ang mga ito sa halip na mai-load nang sabay-sabay. Pinapabuti nito ang pagganap sa pamamagitan lamang ng paglo-load ng mga bahagi kapag kinakailangan ang mga ito at binabawasan ang dami ng data na kailangang ilipat sa network. Nakakatulong din ang lazy loading sa paghahati ng code, na nagbibigay-daan para sa mas malalaking application na hatiin sa mas maliliit na chunks na maaaring i-load on demand.
