performance.prefetch
- 类型:
undefined | true | PrefetchOption
type IncludeType = 'async-chunks' | 'initial' | 'all-assets' | 'all-chunks';
type Filter = Array<string | RegExp> | ((filename: string) => boolean);
interface PrefetchOption {
type?: IncludeType;
include?: Filter;
exclude?: Filter;
}
为 Rsbuild 构建生成的静态资源注入 <link rel="prefetch">
标签。
什么是 prefetch
<link>
元素的 rel 属性中的 prefetch 关键字是为了提示浏览器,用户未来的浏览有可能需要加载目标资源,所以浏览器有可能通过事先获取和缓存对应资源,优化用户体验。
启用 prefetch
当设置 performance.prefetch
为 true
时,Rsbuild 将使用以下默认选项,对资源进行预获取,这表示 prefetch 当前页面的所有异步资源,包含异步 JS 及其关联的 CSS、image、font 等资源。
const defaultOptions = {
type: 'async-chunks',
};
比如,在入口文件中动态引入了其他模块:
index.js
import('./foo');
import('./bar');
在 HTML 中注入的标签为:
<html>
<head>
<title>Rsbuild App</title>
<script defer src="/static/js/index.js"></script>
<!-- 生成的 prefetch 标签 -->
<link href="/static/js/async/src_bar_js.js" rel="prefetch" />
<link href="/static/js/async/src_foo_js.js" rel="prefetch" />
</head>
</html>
手动注入
performance.prefetch
只能为 Rsbuild 构建生成的静态资源注入 prefetch 标签,如果你需要 prefetch 其他资源,可以通过 html.tags 手动添加标签:
rsbuild.config.ts
export default {
html: {
tags: [
{
tag: 'link',
attrs: {
rel: 'prefetch',
href: 'https://example.com/some-script.js',
},
},
],
},
};
注入的 HTML 标签如下:
<link rel="prefetch" href="https://example.com/some-script.js" />
选项
当 performance.prefetch
的值为 object 类型时,Rsbuild 会根据当前选项对指定资源开启 prefetch 能力。
prefetch.type
type
字段控制了哪些资源会被预获取,同时支持通过 include
和 exclude
对指定资源进行二次过滤。
目前支持的资源类型如下:
async-chunks
: prefetch 所有异步资源(当前页面),包含异步 JS 及其关联的 CSS、image、font 等资源。
initial
: prefetch 所有非异步资源(当前页面)。需要注意的是,如果当前脚本已经被添加到 HTML 模版中,则不会进行额外的预获取。
all-chunks
: prefetch 所有资源(当前页面),包含所有异步和非异步资源。
all-assets
: prefetch 所有资源,MPA 场景下会包含其他页面的资源。
示例
当你希望对当前页面中所有 png 格式的图片资源进行 prefetch 时,可以配置如下:
export default {
performance: {
prefetch: {
type: 'all-chunks',
include: [/.*\.png$/],
},
},
};