Ang pangunahing problema na nauugnay sa Lazy Loading ng React Router ay maaari itong magdulot ng mga isyu sa pagganap kung hindi maipatupad nang tama. Maaaring mapataas ng tamad na pag-load ang unang oras ng pag-load ng page, dahil kailangang magkahiwalay na i-load ang code para sa bawat bahagi. Bukod pa rito, kung hindi madalas gamitin ang isang bahagi, maaaring hindi na ito mai-load, na magreresulta sa mga nasayang na mapagkukunan. Sa wakas, may mga potensyal na isyu sa compatibility sa mga mas lumang browser na hindi sumusuporta sa 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. import React, { Suspense } mula sa 'react';
// Ini-import ng linyang ito ang React library at ang Suspense component mula sa React library.
2. i-import ang { BrowserRouter bilang Router, Route, Switch } mula sa 'react-router-dom';
// Ini-import ng linyang ito ang mga bahagi ng BrowserRouter, Route at Switch mula sa react-router-dom library.
3. const Home = React.lazy(() => import('./Home'));
// Ang linyang ito ay lumilikha ng constant na tinatawag na Home na gumagamit ng lazy loading feature ng React para dynamic na mag-import ng component na tinatawag na Home mula sa isang file sa parehong direktoryo ng file na ito (ang App component).
4. const Tungkol sa = React.lazy(() => import('./About'));
// Lumilikha ang linyang ito ng constant na tinatawag na About na gumagamit ng lazy loading para dynamic na mag-import ng component na tinatawag na About mula sa isang file sa parehong direktoryo ng file na ito (ang App component).
const Contact = React.lazy(() => import('./Contact')); // Ang linyang ito ay lumilikha ng isang pare-parehong tinatawag na Contact na gumagamit ng tamad na pag-load upang dynamic na mag-import ng isang bahagi na tinatawag na Contact mula sa isang file sa parehong direktoryo ng file na ito (ang bahagi ng App).
5. function App() { return ( // Ito ay isang arrow function na nagbabalik ng JSX code na nakabalot sa Router tag na na-import nang mas maaga
6.Loading ...
}> //Ang Suspense tag na ito ay bumabalot sa lahat ng aming mga ruta gamit ang fallback props ng Naglo-load... kung ang anumang ruta ay tumatagal ng oras upang mag-load
7. //Sisiguraduhin ng switch tag na isang ruta lang ang nai-render nang sabay-sabay
8. //Ire-render ng Ruta na ito ang Home Component kapag ang eksaktong path na "/" ay naitugma
9. //Ire-render ng Ruta na ito ang About Component kapag ang path na "/about" ay tumugma
10. //Ire-render ng Ruta na ito ang Contact Component kapag ang path na "/contact" ay tumugma ) } i-export ang default na App; //Sa wakas isinara namin ang lahat ng mga tag at i-export ang aming app
Problema sa lazy load
Ang lazy loading ay isang pamamaraan na ginagamit upang maantala ang pag-load ng ilang bahagi hanggang sa kailanganin ang mga ito. Makakatulong ito na mapabuti ang pagganap ng isang application sa pamamagitan lamang ng paglo-load ng kung ano ang kinakailangan sa anumang oras. Gayunpaman, maaari itong maging isang problema kapag gumagamit ng React Router, dahil hindi nito sinusuportahan ang tamad na pag-load sa labas ng kahon. Upang malutas ang isyung ito, dapat na manu-manong i-configure ng mga developer ang kanilang mga ruta para ma-enable ang lazy loading. Maaaring kabilang dito ang pagse-set up ng mga dynamic na pag-import at paghahati ng code, na maaaring maging kumplikado at matagal na gawain. Bukod pa rito, maaaring kailanganing gamitin ang ilang library gaya ng React Loadable para maayos na maipatupad ang lazy loading gamit ang React Router.
Ano ang React lazy load
Ang React lazy load ay isang feature ng React Router na nagbibigay-daan para sa pag-load ng mga component on demand. Nangangahulugan ito na sa halip na i-load ang lahat ng mga bahagi nang sabay-sabay, ang mga kinakailangang sangkap lamang ang nilo-load kapag kinakailangan. Nakakatulong ito na bawasan ang unang oras ng pag-load ng page at pagbutihin ang performance. Pinapayagan din nito ang mas mahusay na organisasyon ng code at paghihiwalay ng mga alalahanin, dahil ang bawat bahagi ay maaaring i-load nang nakapag-iisa.
Paano ko gagamitin ang React lazy sa aking router
Ang React lazy ay isang feature ng React na nagbibigay-daan sa iyong dynamic na mag-import ng mga bahagi. Nangangahulugan ito na sa halip na i-load ang lahat ng mga bahagi nang maaga, maaari mong i-load ang mga ito kung kinakailangan. Maaari itong maging kapaki-pakinabang para sa pag-optimize ng pagganap sa malalaking application.
Upang magamit ang React lazy sa iyong router sa React Router, kailangan mong i-wrap ang component na gusto mong lazy-load sa isang dynamic na tawag sa pag-import. Halimbawa:
const MyComponent = React.lazy(() => import('./MyComponent'));
Pagkatapos, kapag tinutukoy ang iyong mga ruta, ipasa lang ang bahagi ng MyComponent sa bahagi ng Ruta tulad nito:
Magiging sanhi ito ng React Router na dynamic na i-load ang bahagi ng MyComponent kapag nagna-navigate sa rutang iyon.
