preload

Note

基于 React 的框架通常会为你处理资源加载，因此你可能不需要自己调用此 API。有关详细信息，请查阅你的框架文档。

preload 让你可以急切地获取你预计会使用的资源，例如样式表、字体或外部脚本。

preload("https://example.com/font.woff2", {as: "font"});

参考
- preload(href, options)
用法
- 在渲染时预加载
- 在事件处理函数中预加载

参考

`preload(href, options)`

要预加载资源，请从 react-dom 调用 preload 函数。

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/font.woff2", {as: "font"});
  // ...
}

在下面查看更多示例。

preload 函数会向浏览器提供一个提示，告诉它应当开始下载给定资源，这可以节省时间。

参数

href: 字符串。你想要下载的资源 URL。
options: 对象。它包含以下属性：
- as: 必需的字符串。资源类型。其可能的值为 audio、document、embed、fetch、font、image、object、script、style、track、video、worker。
- crossOrigin: 字符串。要使用的 CORS 策略。其可能的值为 anonymous 和 use-credentials。当 as 设置为 "fetch" 时这是必需的。
- referrerPolicy: 字符串。获取资源时发送的 Referrer 标头。其可能的值为 no-referrer-when-downgrade（默认值）、no-referrer、origin、origin-when-cross-origin 和 unsafe-url。
- integrity: 字符串。资源的加密哈希，用于验证其真实性。
- type: 字符串。资源的 MIME 类型。
- nonce: 字符串。在使用严格的内容安全策略时，允许该资源的加密 nonce。
- fetchPriority: 字符串。建议资源获取的相对优先级。可能的值为 auto（默认值）、high 和 low。
- imageSrcSet: 字符串。仅在 as: "image" 时使用。指定图片的源集。
- imageSizes: 字符串。仅在 as: "image" 时使用。指定图片的尺寸。

返回值

preload 不返回任何内容。

注意事项

多次等效调用 preload 与单次调用效果相同。根据以下规则，preload 调用被视为等效：
- 如果两次调用具有相同的 href，则它们等效，除非：
- 如果 as 设置为 image，那么当两次调用具有相同的 href、imageSrcSet 和 imageSizes 时，它们才等效。
在浏览器中，你可以在任何情况下调用 preload：在渲染组件时、在 Effect 中、在事件处理函数中，等等。
在服务端渲染或渲染 Server Components 时，只有当你在渲染组件期间或在源自组件渲染的异步上下文中调用 preload 时，它才会生效。任何其他调用都会被忽略。

用法

在渲染时预加载

如果你知道某个组件或其子组件会使用特定资源，那么在渲染该组件时调用 preload。

预加载示例

Example 1 of 4:
预加载外部脚本

import { preload } from 'react-dom';

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

如果你想让浏览器立即开始执行脚本（而不仅仅是下载它），请改用 preinit。如果你想加载一个 ESM 模块，请使用 preloadModule。

在事件处理函数中预加载

在切换到需要外部资源的页面或状态之前，在事件处理函数中调用 preload。这样会比你在新页面或状态的渲染期间调用它更早开始该过程。

import { preload } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preload("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>开始向导</button>
  );
}

PreviouspreinitModule

NextpreloadModule