preload - This feature is available in the latest Canary

Canary 版本

preload 函数目前仅在 React 的 Canary 和实验通道中可用。在此处详细了解 React 的发布通道

注意

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

preload 允许您预先获取您预期要使用的资源,例如样式表、字体或外部脚本。

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

参考

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:必填字符串。资源类型。其 可能的值audiodocumentembedfetchfontimageobjectscriptstyletrackvideoworker
    • crossOrigin:字符串。CORS 策略。其可能的值为 anonymoususe-credentials。当 as 设置为 "fetch" 时,此属性是必需的。
    • referrerPolicy:字符串。获取资源时发送的Referrer 头部。其可能的值为no-referrer-when-downgrade(默认)、no-referreroriginorigin-when-cross-originunsafe-url
    • integrity:字符串。资源的加密哈希值,用于验证其真实性
    • type:字符串。资源的 MIME 类型。
    • nonce:字符串。使用严格内容安全策略时允许资源的加密随机数
    • fetchPriority:字符串。建议获取资源的相对优先级。可能的值为 auto(默认)、highlow
    • imageSrcSet:字符串。仅与 as: "image" 一起使用。指定图像的来源集
    • imageSizes:字符串。仅与 as: "image" 一起使用。指定图像的尺寸

返回值

preload 不返回任何内容。

注意事项

  • 多次调用等效的 preload 与调用一次的效果相同。根据以下规则,preload 的调用被认为是等效的
    • 如果两次调用具有相同的 href,则它们是等效的,但以下情况除外
    • 如果 as 设置为 image,则如果两次调用具有相同的 hrefimageSrcSetimageSizes,则它们是等效的。
  • 在浏览器中,您可以在任何情况下调用 preload:渲染组件时、在 Effect 中、在事件处理程序中等等。
  • 在服务器端渲染或渲染服务器组件时,preload 只有在渲染组件时或在源自渲染组件的异步上下文中调用时才有效。任何其他调用都将被忽略。

用法

渲染时预加载

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

预加载示例

预加载外部脚本示例 1 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}>Start Wizard</button>
);
}