Masalah utama yang terkait dengan pemuatan malas React Router adalah dapat menyebabkan masalah kinerja jika tidak diterapkan dengan benar. Pemuatan lambat dapat meningkatkan waktu pemuatan halaman awal, karena kode untuk setiap komponen perlu dimuat secara terpisah. Selain itu, jika sebuah komponen tidak sering digunakan, komponen tersebut mungkin tidak akan pernah dimuat sama sekali, yang mengakibatkan pemborosan sumber daya. Terakhir, ada kemungkinan masalah kompatibilitas dengan browser lama yang tidak mendukung pemuatan lambat.
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 } from 'react';
// Baris ini mengimpor pustaka React dan komponen Suspense dari pustaka React.
2. import {BrowserRouter as Router, Route, Switch} dari 'react-router-dom';
// Baris ini mengimpor komponen BrowserRouter, Route, dan Switch dari pustaka react-router-dom.
3. const Beranda = React.lazy(() => import('./Home'));
// Baris ini membuat sebuah konstanta bernama Home yang menggunakan fitur lazy loading dari React untuk mengimpor secara dinamis sebuah komponen bernama Home dari sebuah file dalam direktori yang sama dengan file ini (komponen App).
4. const About = React.lazy(() => import('./About'));
// Baris ini membuat konstanta bernama About yang menggunakan pemuatan malas untuk mengimpor komponen bernama About secara dinamis dari file di direktori yang sama dengan file ini (komponen Aplikasi).
const Kontak = React.lazy(() => import('./Contact')); // Baris ini membuat konstanta bernama Kontak yang menggunakan pemuatan lambat untuk mengimpor komponen bernama Kontak secara dinamis dari file dalam direktori yang sama dengan file ini (komponen Aplikasi).
5. fungsi Aplikasi() { kembali ( // Ini adalah fungsi panah yang mengembalikan kode JSX yang dibungkus dengan tag Router yang diimpor sebelumnya
6.Pemuatan…
}> //Tag Ketegangan ini membungkus semua rute kita dengan properti fallback dari Loading… jika ada rute yang membutuhkan waktu untuk dimuat
7. // Ganti tag akan memastikan hanya satu rute yang dirender sekaligus
8. //Rute ini akan merender Komponen Rumah saat jalur tepat “/” cocok
9. // Rute ini akan merender Tentang Komponen saat jalur "/ tentang" cocok
10. //Rute ini akan merender Komponen Kontak saat jalur “/contact” cocok ) } export default App; //Akhirnya kami menutup semua tag dan mengekspor aplikasi kami
Masalah beban malas
Lazy loading adalah teknik yang digunakan untuk menunda pemuatan komponen tertentu hingga dibutuhkan. Ini dapat membantu meningkatkan kinerja aplikasi dengan hanya memuat apa yang diperlukan pada waktu tertentu. Namun, ini bisa menjadi masalah saat menggunakan React Router, karena tidak mendukung pemuatan lambat di luar kotak. Untuk mengatasi masalah ini, pengembang harus mengonfigurasi rute mereka secara manual untuk mengaktifkan pemuatan lambat. Ini dapat melibatkan penyiapan impor dinamis dan pemecahan kode, yang dapat menjadi tugas yang rumit dan memakan waktu. Selain itu, beberapa pustaka seperti React Loadable mungkin perlu digunakan untuk menerapkan pemuatan lambat dengan benar dengan React Router.
Apa itu Bereaksi beban malas
React lazy load adalah fitur React Router yang memungkinkan pemuatan komponen sesuai permintaan. Ini berarti bahwa alih-alih memuat semua komponen sekaligus, hanya komponen yang diperlukan yang dimuat saat dibutuhkan. Ini membantu mengurangi waktu pemuatan halaman awal dan meningkatkan kinerja. Ini juga memungkinkan pengorganisasian kode yang lebih baik dan pemisahan masalah, karena setiap komponen dapat dimuat secara independen.
Bagaimana cara menggunakan React lazy di router saya
React lazy adalah fitur React yang memungkinkan Anda mengimpor komponen secara dinamis. Ini berarti bahwa alih-alih memuat semua komponen di muka, Anda dapat memuatnya sesuai kebutuhan. Ini dapat berguna untuk mengoptimalkan kinerja dalam aplikasi besar.
Untuk menggunakan React lazy pada router Anda di React Router, Anda perlu membungkus komponen yang ingin Anda muat dengan malas dalam panggilan impor dinamis. Sebagai contoh:
const MyComponent = React.lazy(() => import('./MyComponent'));
Kemudian, saat menentukan rute Anda, cukup berikan komponen MyComponent ke dalam komponen Rute seperti ini:
Ini akan menyebabkan React Router memuat komponen MyComponent secara dinamis saat menavigasi ke rute itu.
