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

为哪些资源配置 prefetch 属性。

该属性用于配置在将来某些导航下可能需要的资源，此时，浏览器通常在空闲状态时获取此资源。

Boolean 类型#

当设置 performance.prefetch 为 true，将根据如下配置对资源进行预获取:

{
  type: 'async-chunks',
}

Object 类型#

当 performance.prefetch 的值为 object 类型时，Rsbuild 会根据当前配置对指定资源开启 prefetch 能力。

prefetch.type#

type 字段控制了哪些资源会被预获取，同时支持通过 include 和 exclude 对指定资源进行二次过滤。

目前支持的资源类型如下：

• async-chunks: 预获取所有异步资源(当前页面)，包含异步 js 及其关联的 css、image、font 等资源。
• initial: 预获取所有非异步资源(当前页面)。需要注意的是，如果当前脚本已经被添加到 html 模版中，则不会进行额外的预获取。
• all-chunks: 预获取所有资源(当前页面)，包含所有异步和非异步资源。
• all-assets: 预获取所有资源，MPA 场景下会包含其他页面的资源。

示例#

当你希望对当前页面中所有 png 格式的图片资源进行预获取时，可以配置如下：

export default {
  performance: {
    prefetch: {
      type: 'all-chunks',
      include: [/.*\.png$/],
    },
  },
};