Phân chia mã bằng React.lazy và Suspense

Bạn không bao giờ cần gửi nhiều mã hơn mức cần thiết cho người dùng, vì vậy, hãy chia các gói của bạn để đảm bảo điều này không bao giờ xảy ra!

Houssein Djirdeh
Jeff Posnick

Phương thức React.lazy giúp bạn dễ dàng chia mã một ứng dụng React ở cấp thành phần bằng cách sử dụng tính năng nhập động.

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
)

Tại sao thông tin này hữu ích?

Một ứng dụng React lớn thường sẽ bao gồm nhiều thành phần, phương thức tiện ích và thư viện bên thứ ba. Nếu bạn không cố gắng tải các phần khác nhau của ứng dụng chỉ khi cần, thì một gói JavaScript lớn duy nhất sẽ được gửi đến người dùng ngay khi họ tải trang đầu tiên. Điều này có thể ảnh hưởng đáng kể đến hiệu suất của trang.

Hàm React.lazy cung cấp một cách thức tích hợp để tách các thành phần trong một ứng dụng thành các đoạn JavaScript riêng biệt mà không tốn nhiều công sức. Sau đó, bạn có thể xử lý các trạng thái tải khi ghép nối với thành phần Suspense.

Suspense (Hồi hộp)

Vấn đề khi gửi tải trọng JavaScript lớn cho người dùng là thời gian cần thiết để trang tải xong, đặc biệt là trên các thiết bị và kết nối mạng yếu hơn. Đó là lý do khiến việc phân chia mã và tải chậm trở nên cực kỳ hữu ích.

Tuy nhiên, sẽ luôn có một độ trễ nhỏ mà người dùng phải trải qua khi một thành phần phân chia mã đang được tìm nạp qua mạng, vì vậy, điều quan trọng là bạn phải hiển thị trạng thái tải hữu ích. Việc sử dụng React.lazy với thành phần Suspense sẽ giúp giải quyết vấn đề này.

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
)

Suspense chấp nhận một thành phần fallback cho phép bạn hiển thị mọi thành phần React dưới dạng trạng thái tải. Ví dụ sau đây minh hoạ cách hoạt động của tính năng này. Hình đại diện chỉ được kết xuất khi người dùng nhấp vào nút, sau đó một yêu cầu sẽ được gửi để truy xuất mã cần thiết cho AvatarComponent bị tạm ngưng. Trong thời gian chờ đợi, thành phần dự phòng đang tải sẽ xuất hiện.

Trong đó, mã tạo nên AvatarComponent có kích thước nhỏ, đó là lý do khiến chỉ có biểu tượng tải xoay vòng xuất hiện trong một khoảng thời gian ngắn. Các thành phần lớn hơn có thể mất nhiều thời gian hơn để tải, đặc biệt là trên các kết nối mạng yếu.

Để minh hoạ rõ hơn về cách hoạt động của tính năng này:

  • Để xem trước trang web, hãy nhấn vào Xem ứng dụng, rồi nhấn vào Toàn màn hình toàn màn hình.
  • Nhấn tổ hợp phím `Control+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
  • Nhấp vào thẻ Mạng.
  • Nhấp vào trình đơn thả xuống Điều tiết. Theo mặc định, trình đơn này được đặt thành Không điều tiết. Chọn 3G nhanh.
  • Nhấp vào nút Click Me (Nhấp vào tôi) trong ứng dụng.

Chỉ báo tải sẽ xuất hiện lâu hơn. Hãy lưu ý cách tất cả mã tạo nên AvatarComponent được tìm nạp dưới dạng một khối riêng biệt.