preload#

• Type: undefined | true | PreloadOption

type IncludeType = 'async-chunks' | 'initial' | 'all-assets' | 'all-chunks';

type Filter = Array<string | RegExp> | ((filename: string) => boolean);

interface PreloadOption {
  type?: IncludeType;
  include?: Filter;
  exclude?: Filter;
}

• Default: undefined

Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination). Refer to preload.

Boolean Type#

When setting performance.preload to true, resources will be preloaded according to the following configuration:

{
  type: 'async-chunks',
}

Object Type#

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

preload.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: preload all asynchronous resources (on the current page), including asynchronous js and its associated css, image, font and other resources.
• initial: preload 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: preload all resources (on the current page), including all asynchronous and non-asynchronous resources.
• all-assets: preload all resources, and resources of other pages will be included in the MPA scenario.

Example#

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

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