preloadModule

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

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

参考

preloadModule(href, options)

要预加载ESM模块，请从react-dom调用preloadModule函数。

import { preloadModule } from 'react-dom';

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

请参见下面的更多示例。

preloadModule函数向浏览器提供提示，指示其应开始下载给定模块，这可以节省时间。

参数

• href：字符串。要下载的模块的URL。
• options：对象。它包含以下属性
  • as：必需的字符串。它必须是'script'。
  • crossOrigin：字符串。CORS策略。其可能的值为anonymous和use-credentials。
  • integrity：字符串。模块的加密哈希，用于验证其真实性。
  • nonce：字符串。一个加密nonce，用于在使用严格的内容安全策略时允许模块。

返回

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