Giới thiệu

Khi phát triển các ứng dụng React lớn, chúng tôi thường sử dụng nhiều hình ảnh và video, cài đặt các gói / thư viện của bên thứ ba, thực hiện lệnh gọi API và thực hiện nhiều việc khác. Điều đó đương nhiên làm tăng thời gian tải ứng dụng của chúng tôi và dẫn đến kích thước gói lớn, góp phần gây ra trải nghiệm người dùng kém. Đó là nơi lười tải đi vào vị trí. Nó cho phép chúng tôi tải nội dung vừa kịp giờ, ngay trước khi nó sẽ được hiển thị trong ứng dụng.

Chúng tôi có thể tránh tải trước nội dung khi nó vẫn ở chế độ xem và tập trung tất cả các nguồn lực vào nội dung trong chế độ xem.

Trong hướng dẫn này, chúng ta sẽ xem xét cách sử dụng React.lazy() và React.Suspense để triển khai chức năng tải chậm và phân tách mã cho phép chúng tôi xử lý việc tách mã mà không cần cài đặt thêm bất kỳ thư viện nào.

Lazy Loading là gì?

Khi chúng tôi khởi chạy một ứng dụng web React, nó thường gói toàn bộ ứng dụng cùng một lúc, tải mọi thứ bao gồm toàn bộ trang ứng dụng web, hình ảnh, nội dung và nhiều thứ khác cho chúng tôi, có khả năng dẫn đến thời gian tải chậm và hiệu suất tổng thể kém, tùy thuộc vào kích thước của nội dung và băng thông internet tại thời điểm đó.

Lười tải cho phép chúng tôi tải các thành phần cụ thể chỉ khi chúng cần thiết. Thông thường, chúng tôi cũng thực hiện tách mã thành các thành phần logic có thể được tải một cách lười biếng với nội dung.

Ví dụ: nếu chúng ta có một trang bảng điều khiển hiển thị nhiều thông tin từ nhiều nguồn khác nhau khi được nhấp vào, thì tốt nhất bạn nên giữ các thành phần và trang này ở chế độ lười tải, để chúng chỉ tải khi cần thiết hoặc được người dùng yêu cầu.

Lưu ý: Quá trình tách một gói mã lớn thành nhiều gói có thể được tải động với mục tiêu tổng thể là tránh các vấn đề về hiệu suất liên quan đến các gói quá khổ được gọi là tách mã. Điều này được thực hiện mà không làm giảm số lượng mã trong ứng dụng của chúng tôi.

Tóm lại, tải chậm cho phép chúng tôi hiển thị các thành phần hoặc phần tử theo yêu cầu, giúp ứng dụng của chúng tôi hiệu quả hơn và cung cấp trải nghiệm người dùng tốt hơn.

Lưu ý: Ứng dụng trang đơn (SPA) được thiết kế để chứa tất cả các trang và nội dung trong một tài liệu / trang duy nhất. Đó là lý do tại sao lazy loading đặc biệt hữu ích khi phát triển các SPA.

Cách triển khai Lazy Loading trong React

Cho đến nay, chúng ta đã biết lazy loading là gì và tại sao việc triển khai nó lại quan trọng. Bây giờ, hãy xem cách chúng ta có thể triển khai nó trong các ứng dụng React của mình, bằng cách sử dụng hai tính năng React giúp dễ dàng thực hiện phân tách mã và tải chậm - React.lazy () và Phản ứng.Suspense.

React.lazy() là một chức năng cho phép chúng tôi kết xuất nhập khẩu động theo cách tương tự như các thành phần thông thường. Sử dụng nhập động cùng với React.lazy() sẽ cho phép chúng tôi nhập một thành phần ngay trước khi nó hiển thị trên màn hình. Một điều quan trọng cần lưu ý là React.lazy() chấp nhận một hàm làm đối số - hàm đó phải gọi động import() trong cơ thể của nó.

React.Suspense cho phép chúng tôi chỉ định dự phòng chống đỡ lấy nội dung trình giữ chỗ sẽ được sử dụng làm chỉ báo tải trong khi tất cả các thành phần lười biếng được tải.

Hãy bắt đầu bằng cách xem xét cách chúng ta có thể triển khai tính năng tải chậm trong các thành phần đã nhập của mình và sau đó làm thế nào chúng ta có thể triển khai nó trong các tuyến của mình để các trang không được tải cho đến khi chúng ta điều hướng đến chúng.

Bắt đầu

Giả sử chúng ta có ứng dụng React và chúng ta đã nhập About thành phần vào Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Bây giờ chúng tôi có thể triển khai tải chậm bằng cách sử dụng React.lazy():

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Lưu ý: React.lazy() được sử dụng theo cách này trả về một Promise sự vật. Lời hứa đó giải quyết thành một mô-đun có chứa thành phần React mà chúng tôi muốn tải chậm trong nó default xuất khẩu.

Chúng tôi đã triển khai tải chậm bằng cách sử dụng React.lazy(), nhưng đoạn mã trên sẽ luôn ném ra một lôi nói rằng của chúng tôi “React component suspended while rendering, but no fallback UI was specified”. Điều này có thể được khắc phục bằng cách bọc thành phần bằng React.Suspense'S fallbackz và đính kèm các đạo cụ dự phòng như chúng tôi đã giải thích trước đó:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Lưu ý: Dự phòng hỗ trợ có thể sử dụng một thành phần để hiển thị trước khi tải nội dung gốc lên.

Ngoài ra, chúng tôi có thể quyết định phá hoại nhập React để làm cho mã sạch hơn và dễ đọc hơn:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Cho đến nay, chúng ta đã thấy cách thực hiện tải chậm trong các thành phần đã nhập của mình. Bây giờ, chúng ta hãy xem cách triển khai nó trong các tuyến đường của chúng tôi khi định tuyến với bộ định tuyến React.

Cách triển khai Lazy Loading với React Router

Định tuyến lười biếng thực sự là một phương pháp hay đối với các tuyến đường có nhiều nội dung và có thể làm chậm thời gian tải ứng dụng của bạn. Việc triển khai lazy loading cho các tuyến React gần giống với những gì chúng ta đã làm trước đó khi lazy loading các thành phần được nhập động.

Các tuyến phản ứng tải chậm đề cập đến việc nhập động một thành phần chỉ khi nó cần thiết. Ví dụ: giả sử chúng ta có hai tuyến đường trong ứng dụng của mình và hai thành phần đại diện cho các tuyến đường đó. Nếu chúng tôi triển khai định tuyến được đề cập theo cách sau, mỗi thành phần sẽ chỉ được tải khi chúng tôi điều hướng đến tuyến đường tương ứng:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Kết luận

Trong hướng dẫn này, chúng ta đã tìm hiểu về tải lười biếng và phân tách mã là gì, cách triển khai chúng và nơi tốt nhất để triển khai tải chậm là với các tuyến đường. Điều này tránh hiển thị toàn bộ trang cùng một lúc, điều này có thể dẫn đến thời gian tải chậm hơn khi xử lý các trang có lượng nội dung lớn.