Utama » JavaScript » Reouter Penghala » Selesai: bertindak balas terhadap beban malas penghala
Masalah utama yang berkaitan dengan pemuatan malas Penghala Reaksi ialah ia boleh menyebabkan masalah prestasi jika tidak dilaksanakan dengan betul. Pemuatan malas boleh meningkatkan masa muat halaman awal, kerana kod untuk setiap komponen perlu dimuatkan secara berasingan. Selain itu, jika komponen tidak digunakan dengan kerap, ia mungkin tidak akan dimuatkan sama sekali, mengakibatkan sumber terbuang. Akhir sekali, terdapat potensi masalah keserasian dengan penyemak imbas lama yang tidak menyokong pemuatan malas.
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 } daripada 'react';
// Baris ini mengimport pustaka React dan komponen Suspense daripada pustaka React.
2. import { BrowserRouter sebagai Router, Route, Switch } daripada 'react-router-dom';
// Baris ini mengimport komponen BrowserRouter, Route dan Switch daripada pustaka react-router-dom.
3. const Home = React.lazy(() => import('./Home'));
// Baris ini mencipta pemalar dipanggil Home yang menggunakan ciri pemuatan malas React untuk mengimport komponen yang dipanggil Home secara dinamik daripada fail dalam direktori yang sama dengan fail ini (komponen Apl).
4. const About = React.lazy(() => import('./About'));
// Baris ini mencipta pemalar dipanggil Perihal yang menggunakan pemuatan malas untuk mengimport komponen yang dipanggil Perihal secara dinamik daripada fail dalam direktori yang sama dengan fail ini (komponen Apl).
const Contact = React.lazy(() => import('./Contact')); // Baris ini mencipta pemalar dipanggil Kenalan yang menggunakan pemuatan malas untuk mengimport komponen secara dinamik yang dipanggil Kenalan daripada fail dalam direktori yang sama dengan fail ini (komponen Aplikasi).
5. fungsi App() { return ( // Ini ialah fungsi anak panah yang mengembalikan kod JSX yang dibalut dalam teg Penghala yang diimport lebih awal
6.Loading ...
}> //Teg Suspense ini membungkus semua laluan kami dengan prop sandaran Memuatkan... jika mana-mana laluan mengambil masa untuk dimuatkan
7. //Tukar teg akan memastikan hanya satu laluan diberikan sekali gus
8. //Laluan ini akan memaparkan Komponen Rumah apabila laluan tepat "/" dipadankan
9. //Laluan ini akan memaparkan Mengenai Komponen apabila laluan "/about" dipadankan
10. //Laluan ini akan memaparkan Komponen Kenalan apabila laluan “/contact” dipadankan ) } eksport Apl lalai; //Akhirnya kami menutup semua teg dan mengeksport apl kami
Masalah beban malas
Lazy loading adalah teknik yang digunakan untuk menangguhkan pemuatan komponen tertentu sehingga ia diperlukan. Ini boleh membantu meningkatkan prestasi aplikasi dengan hanya memuatkan perkara yang perlu pada bila-bila masa. Walau bagaimanapun, ini boleh menjadi masalah apabila menggunakan Penghala Reaksi, kerana ia tidak menyokong pemuatan malas di luar kotak. Untuk menyelesaikan isu ini, pembangun mesti mengkonfigurasi laluan mereka secara manual untuk membolehkan pemuatan malas. Ini boleh melibatkan penyediaan import dinamik dan pemisahan kod, yang boleh menjadi tugas yang rumit dan memakan masa. Selain itu, sesetengah perpustakaan seperti React Loadable mungkin perlu digunakan untuk melaksanakan pemuatan malas dengan betul dengan React Router.
Apa itu React lazy load
React lazy load ialah ciri Penghala React yang membolehkan pemuatan komponen atas permintaan. Ini bermakna daripada memuatkan semua komponen sekaligus, hanya komponen yang diperlukan dimuatkan apabila diperlukan. Ini membantu mengurangkan masa muat halaman awal dan meningkatkan prestasi. Ia juga membolehkan organisasi kod yang lebih baik dan pengasingan kebimbangan, kerana setiap komponen boleh dimuatkan secara bebas.
Bagaimanakah saya menggunakan React malas pada penghala saya
React lazy ialah ciri React yang membolehkan anda mengimport komponen secara dinamik. Ini bermakna bahawa bukannya memuatkan semua komponen terlebih dahulu, anda boleh memuatkannya mengikut keperluan. Ini boleh berguna untuk mengoptimumkan prestasi dalam aplikasi besar.
Untuk menggunakan React lazy pada penghala anda dalam React Router, anda perlu membalut komponen yang anda ingin muatkan malas dalam panggilan import dinamik. Sebagai contoh:
const MyComponent = React.lazy(() => import('./MyComponent'));
Kemudian, apabila mentakrifkan laluan anda, hantarkan komponen MyComponent ke dalam komponen Route seperti:
Ini akan menyebabkan React Router memuatkan komponen MyComponent secara dinamik apabila menavigasi ke laluan itu.
