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
:必填字符串。资源类型。其 可能的值 为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
:字符串。使用严格内容安全策略时允许资源的加密随机数。fetchPriority
:字符串。建议获取资源的相对优先级。可能的值为auto
(默认)、high
和low
。imageSrcSet
:字符串。仅与as: "image"
一起使用。指定图像的来源集。imageSizes
:字符串。仅与as: "image"
一起使用。指定图像的尺寸。
返回值
preload
不返回任何内容。
注意事项
- 多次调用等效的
preload
与调用一次的效果相同。根据以下规则,preload
的调用被认为是等效的- 如果两次调用具有相同的
href
,则它们是等效的,但以下情况除外 - 如果
as
设置为image
,则如果两次调用具有相同的href
、imageSrcSet
和imageSizes
,则它们是等效的。
- 如果两次调用具有相同的
- 在浏览器中,您可以在任何情况下调用
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>
);
}