close
Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

performance.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

Inject the <link rel="prefetch"> tags for the static assets generated by Rsbuild.

What is prefetch

The prefetch keyword for the rel attribute of the <link> element provides a hint to browsers that the user is likely to need the target resource for future navigation, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource.

Enable prefetch

When performance.prefetch is set to true, Rsbuild will use the following default options to prefetch resources. This means prefetching all asynchronous resources on the current page, including asynchronous JS and its associated CSS, image, font, and other resources.

const defaultOptions = {
  type: 'async-chunks',
};

For example, if you dynamically import other modules in the entry file:

index.js
import('./foo');
import('./bar');

The tags injected in HTML are as follows:

<html>
  <head>
    <title>Rsbuild App</title>
    <script defer src="/static/js/index.js"></script>
    <!-- Generated prefetch tags -->
    <link href="/static/js/async/src_bar_js.js" rel="prefetch" />
    <link href="/static/js/async/src_foo_js.js" rel="prefetch" />
  </head>
</html>

Inject Manually

The performance.prefetch can only inject the prefetch tags for static resources generated by Rsbuild. If you need to prefetch other resources, you can manually add tags through html.tags :

rsbuild.config.ts
export default {
  html: {
    tags: [
      {
        tag: 'link',
        attrs: {
          rel: 'prefetch',
          href: 'https://example.com/some-script.js',
        },
      },
    ],
  },
};

The injected HTML tag is as follows:

<link rel="prefetch" href="https://example.com/some-script.js" />

Options

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

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