close
指南
配置
插件
API
社区
指南
配置
插件
API
社区
简体中文

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;
}
  • 默认值： undefined

为 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$/],
    },
  },
};