Vấn đề chính liên quan đến React Router lazy loading là nó có thể gây ra các vấn đề về hiệu suất nếu không được triển khai đúng cách. Tải chậm có thể làm tăng thời gian tải trang ban đầu vì mã cho từng thành phần cần được tải riêng. Ngoài ra, nếu một thành phần không được sử dụng thường xuyên, nó có thể không bao giờ được tải, dẫn đến lãng phí tài nguyên. Cuối cùng, có thể xảy ra sự cố tương thích với các trình duyệt cũ không hỗ trợ tải chậm.
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. nhập React, { Suspense } từ 'reac';
// Dòng này nhập thư viện React và thành phần Suspense từ thư viện React.
2. nhập { BrowserRouter làm Bộ định tuyến, Tuyến đường, Chuyển đổi } từ 'Reac-router-dom';
// Dòng này nhập các thành phần BrowserRouter, Route và Switch từ thư viện Reac-router-dom.
3. const Home = React.lazy(() => import('./Home'));
// Dòng này tạo một hằng số có tên là Home sử dụng tính năng lazy loading của React để nhập động một thành phần có tên là Home từ một tệp trong cùng thư mục với tệp này (thành phần Ứng dụng).
4. const About = React.lazy(() => import('./About'));
// Dòng này tạo một hằng số có tên Giới thiệu sử dụng tính năng tải chậm để nhập động một thành phần có tên Giới thiệu từ một tệp trong cùng thư mục với tệp này (thành phần Ứng dụng).
const Contact = React.lazy(() => import('./Contact')); // Dòng này tạo một hằng số có tên là Liên hệ sử dụng tải chậm để nhập động một thành phần có tên là Liên hệ từ một tệp trong cùng thư mục với tệp này (thành phần Ứng dụng).
5. hàm Ứng dụng () { return ( // Đây là hàm mũi tên trả về mã JSX được bao bọc trong thẻ Bộ định tuyến được nhập trước đó
6.Tải…
}> //Thẻ Suspense này kết thúc tất cả các route của chúng ta với props dự phòng là Loading… nếu bất kỳ route nào cần thời gian để tải
7. // Thẻ chuyển đổi sẽ đảm bảo chỉ có một tuyến đường được hiển thị cùng một lúc
8. // Tuyến này sẽ hiển thị Thành phần chính khi đường dẫn chính xác “/” được khớp
9. // Tuyến này sẽ hiển thị Giới thiệu về Thành phần khi đường dẫn “/about” được khớp
10. // Tuyến này sẽ hiển thị Thành phần liên hệ khi đường dẫn “/liên hệ” được khớp) } xuất ứng dụng mặc định; // Cuối cùng, chúng tôi đóng tất cả các thẻ và xuất ứng dụng của mình
Vấn đề lười tải
Tải chậm là một kỹ thuật được sử dụng để trì hoãn việc tải một số thành phần nhất định cho đến khi chúng cần thiết. Điều này có thể giúp cải thiện hiệu suất của ứng dụng bằng cách chỉ tải những gì cần thiết vào bất kỳ thời điểm nào. Tuy nhiên, đây có thể là một vấn đề khi sử dụng React Router, vì nó không hỗ trợ lazy loading. Để khắc phục sự cố này, nhà phát triển phải tự cấu hình tuyến đường của họ để kích hoạt tải từng phần. Điều này có thể liên quan đến việc thiết lập nhập động và tách mã, đây có thể là những nhiệm vụ phức tạp và tốn thời gian. Ngoài ra, một số thư viện như React Loadable có thể cần được sử dụng để triển khai đúng cách lazy loading với React Router.
Phản ứng lười tải là gì
React lazy load là một tính năng của React Router cho phép tải các thành phần theo yêu cầu. Điều này có nghĩa là thay vì tải tất cả các thành phần cùng một lúc, chỉ những thành phần cần thiết được tải khi cần. Điều này giúp giảm thời gian tải trang ban đầu và cải thiện hiệu suất. Nó cũng cho phép tổ chức mã tốt hơn và phân tách các mối quan tâm, vì mỗi thành phần có thể được tải độc lập.
Làm cách nào để sử dụng React lazy trên bộ định tuyến của tôi
React lazy là một tính năng của React cho phép bạn nhập động các thành phần. Điều này có nghĩa là thay vì tải trước tất cả các thành phần, bạn có thể tải chúng khi cần. Điều này có thể hữu ích để tối ưu hóa hiệu suất trong các ứng dụng lớn.
Để sử dụng React lazy trên bộ định tuyến của bạn trong React Router, bạn cần bọc thành phần mà bạn muốn lazy-load trong lệnh gọi nhập động. Ví dụ:
const MyComponent = React.lazy(() => import('./MyComponent'));
Sau đó, khi xác định tuyến đường của bạn, chỉ cần chuyển thành phần MyComponent vào thành phần Tuyến đường như sau:
Điều này sẽ khiến Bộ định tuyến React tự động tải thành phần MyComponent khi điều hướng đến tuyến đường đó.
