preloadModule
可让你预先获取你希望使用的 ESM 模块。
¥preloadModule
lets you eagerly fetch an ESM module that you expect to use.
preloadModule("https://example.com/module.js", {as: "script"});
参考
¥Reference
preloadModule(href, options)
要预加载 ESM 模块,请从 react-dom
调用 preloadModule
函数。
¥To preload an ESM module, call the preloadModule
function from react-dom
.
import { preloadModule } from 'react-dom';
function AppRoot() {
preloadModule("https://example.com/module.js", {as: "script"});
// ...
}
preloadModule
函数向浏览器提供一个提示,指示它应该开始下载给定的模块,这可以节省时间。
¥The preloadModule
function provides the browser with a hint that it should start downloading the given module, which can save time.
参数
¥Parameters
-
href
:一个字符串。你要下载的模块的 URL。¥
href
: a string. The URL of the module you want to download. -
options
:一个对象。它包含以下属性:¥
options
: an object. It contains the following properties:-
as
:一个必需的字符串。一定是'script'
。¥
as
: a required string. It must be'script'
. -
crossOrigin
:一个字符串。要使用的 CORS 政策。它的可能值为anonymous
和use-credentials
。¥
crossOrigin
: a string. The CORS policy to use. Its possible values areanonymous
anduse-credentials
. -
integrity
:一个字符串。模块的加密哈希,为 验证其真实性。¥
integrity
: a string. A cryptographic hash of the module, to verify its authenticity. -
nonce
:一个字符串。使用严格的内容安全策略时的加密 允许模块的随机数。¥
nonce
: a string. A cryptographic nonce to allow the module when using a strict Content Security Policy.
-
返回
¥Returns
preloadModule
不返回任何内容。
¥preloadModule
returns nothing.
注意事项
¥Caveats
-
对具有相同
href
的preloadModule
进行多次调用与单次调用具有相同的效果。¥Multiple calls to
preloadModule
with the samehref
have the same effect as a single call. -
在浏览器中,任何情况都可以调用
preloadModule
:在渲染组件时、在副作用中、在事件处理程序中等等。¥In the browser, you can call
preloadModule
in any situation: while rendering a component, in an Effect, in an event handler, and so on. -
在服务器端渲染或渲染服务器组件时,
preloadModule
仅在渲染组件时或在源自渲染组件的异步上下文中调用它时才有效。任何其他调用都将被忽略。¥In server-side rendering or when rendering Server Components,
preloadModule
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
如果你知道组件或其子组件将使用特定模块,则在渲染组件时调用 preloadModule
。
¥Call preloadModule
when rendering a component if you know that it or its children will use a specific module.
import { preloadModule } from 'react-dom';
function AppRoot() {
preloadModule("https://example.com/module.js", {as: "script"});
return ...;
}
如果你希望浏览器立即开始执行模块(而不是仅仅下载它),请改用 preinitModule
。如果要加载不是 ESM 模块的脚本,请使用 preload
。
¥If you want the browser to start executing the module immediately (rather than just downloading it), use preinitModule
instead. If you want to load a script that isn’t an ESM module, use preload
.
在事件处理程序中预加载
¥Preloading in an event handler
在转换到需要模块的页面或状态之前,在事件处理程序中调用 preloadModule
。与在渲染新页面或状态期间调用该进程相比,这可以更早地启动该进程。
¥Call preloadModule
in an event handler before transitioning to a page or state where the module will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
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>
);
}