preloadModule
可以急切地预获取期望使用的 ESM 模块。
preloadModule("https://example.com/module.js", {as: "script"});
参考
preloadModule(href, options)
调用 react-dom
中的 preloadModule
函数以实现预加载资源。
import { preloadModule } from 'react-dom';
function AppRoot() {
preloadModule("https://example.com/module.js", {as: "script"});
// ……
}
preloadModule
函数向浏览器提供一个提示,告诉它应该开始下载给定的资源,这将会节省时间。
参数
href
:字符串,要下载的资源的 URL。options
:对象,可以包含以下属性:
Returns
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>
);
}