preloadModule

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

• 参考
  • preloadModule(href, options)
• 用法
  • 在渲染时预加载
  • 在事件处理程序中预加载

参考

preloadModule(href, options)

调用 react-dom 中的 preloadModule 函数以实现预加载资源。

import { preloadModule } from 'react-dom';

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

参见下方更多示例。

preloadModule 函数向浏览器提供一个提示，告诉它应该开始下载给定的资源，这将会节省时间。

参数

• href：字符串，要下载的资源的 URL。
• options：对象，可以包含以下属性：
  • as：必需的字符串，表示资源的类型，可能的值 包括 audio、document、embed、fetch、font、image、object、script、style、track、video 与 worker。
  • crossOrigin：字符串，表示要使用的 CORS 策略，可能的值为 anonymous 与 use-credentials。当 as 设置为 "fetch" 时是必需的。
  • integrity：字符串，为资源的加密哈希，用于 验证其真实性。
  • nonce：字符串，表示使用严格内容安全策略时允许资源的 加密随机数。

Returns

preloadModule 不返回任何值。

注意

• 对于相同的 href，多次调用 preloadModule 具有与单次调用相同的效果。
• 在浏览器中，你可以在任何情况下调用 preloadModule：在渲染组件时、在 Effect 中以及在事件处理程序中等等。
• 在服务器端渲染或渲染服务器组件时，只有在渲染组件或在从渲染组件中发起的异步上下文中调用 preloadModule 时才会生效。任何其他调用都将被忽略。

用法

在渲染时预加载

如果知道组件或其子组件将使用特定资源，那么在渲染组件时调用 preloadModule。

import { preloadModule } from 'react-dom';

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

如果希望浏览器立即开始执行模块（而不仅仅是下载它），请改用 preinitModule；如果想加载一个不是 ESM 模块的脚本，请使用 preload。

在事件处理程序中预加载

在转换到需要外部资源的页面或状态之前，于事件处理程序中调用 preloadModule。这会比在渲染新页面或状态时调用它更早地启动了该过程。

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>
  );
}