diff --git a/packages/core/src/types/config.ts b/packages/core/src/types/config.ts index 75f23d8cf3..b4ef94902c 100644 --- a/packages/core/src/types/config.ts +++ b/packages/core/src/types/config.ts @@ -1597,10 +1597,11 @@ export interface HtmlConfig { { entryName: string } >; /** - * Set the loading mode of the ` - + + + + ``` -### module +### blocking -When `scriptLoading` is set to `module`, the script can support ES modules syntax, and the browser will automatically delay the execution of these scripts by default, which is similar to `defer`. +Setting `scriptLoading` to `blocking` will remove the `defer` attribute, and the script is executed synchronously, which means it will block the browser's parsing and rendering process until the script file is downloaded and executed. -```js +```ts title="rsbuild.config.ts" export default { html: { - scriptLoading: 'module', + inject: 'body', + scriptLoading: 'blocking', }, }; ``` +When you need to set `blocking`, it is recommended to set [html.inject](/config/html/inject) to `'body'` to avoid page rendering being blocked. + ```html - - - - + + + + ``` diff --git a/website/docs/zh/config/html/script-loading.mdx b/website/docs/zh/config/html/script-loading.mdx index 6e5fed23a1..cdb6cb5b6f 100644 --- a/website/docs/zh/config/html/script-loading.mdx +++ b/website/docs/zh/config/html/script-loading.mdx @@ -3,11 +3,19 @@ - **类型:** `'defer' | 'blocking' | 'module'` - **默认值:** `'defer'` -用于设置 ` - + + + + ``` -### module +### blocking -将 `scriptLoading` 设置为 `module` 时,可以让脚本支持 ES modules 语法,同时浏览器也会自动默认延迟执行这些脚本,效果与 `defer` 类似。 +将 `scriptLoading` 设置为 `blocking` 可以移除 `defer` 属性,此时脚本是同步执行的,这意味着它会阻塞浏览器的解析和渲染过程,直到脚本文件被下载并执行完毕。 -```js +```ts title="rsbuild.config.ts" export default { html: { - scriptLoading: 'module', + inject: 'body', + scriptLoading: 'blocking', }, }; ``` +当你需要设置 `blocking` 时,建议把 [html.inject](/config/html/inject) 设置为 `body`,避免页面渲染被阻塞。 + ```html - - - - + + + + ```