preloadModule

preloadModule("https://example.com/module.js", {as: "script"});

• Tham khảo
  • preloadModule(href, options)
• Cách sử dụng
  • Tải trước khi hiển thị
  • Tải trước trong một trình xử lý sự kiện

Tham khảo

preloadModule(href, options)

Để tải trước một module ESM, hãy gọi hàm preloadModule từ react-dom.

import { preloadModule } from 'react-dom';

function AppRoot() {
  preloadModule("https://example.com/module.js", {as: "script"});
  // ...
}

Xem thêm các ví dụ bên dưới.

Hàm preloadModule cung cấp cho trình duyệt một gợi ý rằng nó nên bắt đầu tải xuống module đã cho, điều này có thể tiết kiệm thời gian.

Tham số

• href: một chuỗi. URL của module bạn muốn tải xuống.
• options: một đối tượng. Nó chứa các thuộc tính sau:
  • as: một chuỗi bắt buộc. Nó phải là 'script'.
  • crossOrigin: một chuỗi. Chính sách CORS để sử dụng. Các giá trị có thể là anonymous và use-credentials.
  • integrity: một chuỗi. Một hàm băm mật mã của module, để xác minh tính xác thực của nó.
  • nonce: một chuỗi. Một nonce mật mã để cho phép module khi sử dụng Chính sách Bảo mật Nội dung nghiêm ngặt.

Giá trị trả về

preloadModule không trả về gì cả.

Lưu ý

• Nhiều lệnh gọi đến preloadModule với cùng một href có cùng hiệu ứng như một lệnh gọi duy nhất.
• Trong trình duyệt, bạn có thể gọi preloadModule trong mọi tình huống: trong khi hiển thị một component, trong một Effect, trong một trình xử lý sự kiện, v.v.
• Trong quá trình hiển thị phía máy chủ hoặc khi hiển thị Server Components, preloadModule chỉ có hiệu lực nếu bạn gọi nó trong khi hiển thị một component hoặc trong một ngữ cảnh không đồng bộ bắt nguồn từ việc hiển thị một component. Bất kỳ lệnh gọi nào khác sẽ bị bỏ qua.

Cách sử dụng

Tải trước khi hiển thị

Gọi preloadModule khi hiển thị một component nếu bạn biết rằng nó hoặc các component con của nó sẽ sử dụng một module cụ thể.

import { preloadModule } from 'react-dom';

function AppRoot() {
  preloadModule("https://example.com/module.js", {as: "script"});
  return ...;
}

Nếu bạn muốn trình duyệt bắt đầu thực thi module ngay lập tức (thay vì chỉ tải xuống), hãy sử dụng preinitModule thay thế. Nếu bạn muốn tải một script không phải là module ESM, hãy sử dụng preload.

Tải trước trong một trình xử lý sự kiện

Gọi preloadModule trong một trình xử lý sự kiện trước khi chuyển sang một trang hoặc trạng thái nơi module sẽ được cần đến. Điều này giúp quá trình bắt đầu sớm hơn so với việc bạn gọi nó trong quá trình hiển thị trang hoặc trạng thái mới.

import { preloadModule } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preloadModule("https://example.com/module.js", {as: "script"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}