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.prefetchtrue,将根据如下配置对资源进行预获取:

{
  type: 'async-chunks',
}

Object 类型

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

prefetch.type

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

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

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

示例

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

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