注意

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

¥React-based frameworks frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework’s documentation for details.

preload 允许你预先获取你希望使用的资源，例如样式表、字体或外部脚本。

¥preload lets you eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use.

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

参考

¥Reference

preload(href, options)

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

¥To preload a resource, call the preload function from react-dom.

import { preload } from 'react-dom';

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

请参阅下面的更多示例。

¥See more examples below.

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

¥The preload function provides the browser with a hint that it should start downloading the given resource, which can save time.

参数

¥Parameters

  • href：一个字符串。你要下载的资源的 URL。

    ¥href: a string. The URL of the resource you want to download.

  • options：一个对象。它包含以下属性：

    ¥options: an object. It contains the following properties:

    • as：一个必需的字符串。资源的类型。其 可能的值 为 audio、document、embed、fetch、font、image、object、script、style、track、video、worker。

      ¥as: a required string. The type of resource. Its possible values are audio, document, embed, fetch, font, image, object, script, style, track, video, worker.

    • crossOrigin：一个字符串。要使用的 CORS 政策。它的可能值为 anonymous 和 use-credentials。当 as 设置为 "fetch" 时需要。

      ¥crossOrigin: a string. The CORS policy to use. Its possible values are anonymous and use-credentials. It is required when as is set to "fetch".

    • referrerPolicy：一个字符串。获取时发送的 推荐人标头。其可能的值为 no-referrer-when-downgrade（默认值）、no-referrer、origin、origin-when-cross-origin 和 unsafe-url。

      ¥referrerPolicy: a string. The Referrer header to send when fetching. Its possible values are no-referrer-when-downgrade (the default), no-referrer, origin, origin-when-cross-origin, and unsafe-url.

    • integrity：一个字符串。资源的加密哈希值，为 验证其真实性。

      ¥integrity: a string. A cryptographic hash of the resource, to verify its authenticity.

    • type：一个字符串。资源的 MIME 类型。

      ¥type: a string. The MIME type of the resource.

    • nonce：一个字符串。使用严格的内容安全策略时的加密 允许资源的随机数。

      ¥nonce: a string. A cryptographic nonce to allow the resource when using a strict Content Security Policy.

    • fetchPriority：一个字符串。建议获取资源的相对优先级。可能的值为 auto（默认值）、high 和 low。

      ¥fetchPriority: a string. Suggests a relative priority for fetching the resource. The possible values are auto (the default), high, and low.

    • imageSrcSet：一个字符串。仅适用于 as: "image"。指定 图片的源集。

      ¥imageSrcSet: a string. For use only with as: "image". Specifies the source set of the image.

    • imageSizes：一个字符串。仅适用于 as: "image"。指定 图片的尺寸。

      ¥imageSizes: a string. For use only with as: "image". Specifies the sizes of the image.

返回

¥Returns

preload 不返回任何内容。

¥preload returns nothing.

注意事项

¥Caveats

  • 对 preload 的多个等效调用与单个调用具有相同的效果。根据以下规则，对 preload 的调用被视为等效：

    ¥Multiple equivalent calls to preload have the same effect as a single call. Calls to preload are considered equivalent according to the following rules:

    • 如果两个调用具有相同的 href，则它们是等效的，但以下情况除外：

      ¥Two calls are equivalent if they have the same href, except:

    • 如果 as 设置为 image，则两个调用如果具有相同的 href、imageSrcSet 和 imageSizes，则等效。

      ¥If as is set to image, two calls are equivalent if they have the same href, imageSrcSet, and imageSizes.

  • 在浏览器中，任何情况都可以调用 preload：在渲染组件时、在副作用中、在事件处理程序中等等。

    ¥In the browser, you can call preload in any situation: while rendering a component, in an Effect, in an event handler, and so on.

  • 在服务器端渲染或渲染服务器组件时，preload 仅在渲染组件时或在源自渲染组件的异步上下文中调用它时才有效。任何其他调用都将被忽略。

    ¥In server-side rendering or when rendering Server Components, preload only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.

用法

¥Usage

渲染时预加载

¥Preloading when rendering

如果你知道组件或其子组件将使用特定资源，则在渲染组件时调用 preload。

¥Call preload when rendering a component if you know that it or its children will use a specific resource.

Examples of preloading

例子 1 of 4:
预加载外部脚本

¥Preloading an external script

import { preload } from 'react-dom';

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

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

¥If you want the browser to start executing the script immediately (rather than just downloading it), use preinit instead. If you want to load an ESM module, use preloadModule.

在事件处理程序中预加载

¥Preloading in an event handler

在转换到需要外部资源的页面或状态之前，在事件处理程序中调用 preload。与在渲染新页面或状态期间调用该进程相比，这可以更早地启动该进程。

¥Call preload in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.

import { preload } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preload("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}
上一章preinitModule
下一章preloadModule