prefetch#

• Type: 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;
}

• Default: undefined

Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. Refer to prefetch.

Boolean Type#

When setting performance.prefetch to true, resources will be prefetched according to the following configuration:

{
  type: 'async-chunks',
}

Object Type#

When the value of performance.prefetch is object type, the Rsbuild will enable the prefetch capability for the specified resource according to the current configuration.

prefetch.type#

The type field controls which resources will be pre-fetched, and supports secondary filtering of specified resources through include and exclude.

Currently supported resource types are as follows:

• async-chunks: prefetch all asynchronous resources (on the current page), including asynchronous js and its associated css, image, font and other resources.
• initial: prefetch all non-async resources (on the current page). It should be noted that if the current script has been added to the html template, no additional pre-fetching will be performed.
• all-chunks: prefetch all resources (on the current page), including all asynchronous and non-asynchronous resources.
• all-assets: prefetch all resources, and resources of other pages will be included in the MPA scenario.

Example#

When you want to prefetch all image resources in png format on the current page, you can configure it as follows:

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