preloadModule
允许您预先获取您预期要使用的 ESM 模块。
preloadModule("https://example.com/module.js", {as: "script"});
参考
preloadModule(href, options)
要预加载 ESM 模块,请从 react-dom
调用 preloadModule
函数。
import { preloadModule } from 'react-dom';
function AppRoot() {
preloadModule("https://example.com/module.js", {as: "script"});
// ...
}
preloadModule
函数为浏览器提供了应该开始下载给定模块的提示,这可以节省时间。
参数
href
:字符串。要下载的模块的 URL。options
:对象。它包含以下属性:
返回值
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>
);
}