dnsPrefetch#

• Type: undefined | string[]
• Default: undefined

Used to configure the dns-prefetch attribute.

After this property is set, the domain name can be resolved before the resource is requested, reducing request latency and improving loading performance.

Why DNS Prefetch#

When a browser requests a resource from a (third party) server, that cross-origin's domain name must be resolved to an IP address before the browser can issue the request. This process is known as DNS resolution. While DNS caching can help to reduce this latency, DNS resolution can add significant latency to requests.

Configuring dns-prefetch can resolve the domain before requesting resources, reducing request latency and improving loading performance.

For more information, please refer to: Using dns-prefetch.

Example#

export default {
  performance: {
    dnsPrefetch: ['https://example.com'],
  },
};

The generated HTML tag in HTML is:

<link rel="dns-prefetch" href="https://example.com" />

Notes#

In general, a website should not configure more than 10 DNS prefetches.

Using too many DNS prefetches can lead to performance issues because browsers have limits on the number of DNS requests they can maintain. Excessive DNS prefetching, or prefetching for domains that are not ultimately used can cause resource contention and may reduce browser efficiency.

For more details, refer to What Is a DNS Prefetch?.