dns-prefetch-webpack-plugin

中文文档

A webpack plugin for dns-prefetch

Why use dns-prefetch?

dns-prefetch can reduce third party DNS resolution latency：

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. For websites that open connections to many third parties, this latency can significantly reduce loading performance.

Installation

1npm install dns-prefetch-webpack-plugin -D

How to use?

webpack.config.js

1const DnsPrefetchWebpackPlugin = require("dns-prefetch-webpack-plugin");
2
3module.exports = {
4  entry: "index.js",
5  output: {
6    path: __dirname + "/dist",
7    filename: "index_bundle.js",
8  },
9  plugins: [new DnsPrefetchWebpackPlugin()],
10};

you can mannualy define the domains

1{
2  plugins: [new DnsPrefetchWebpackPlugin(['example1.com', 'example2.com'])],
3}

use with html-webpack-plugin

1const HtmlWebpackPlugin = require("html-webpack-plugin");
2const DnsPrefetchWebapckPlugin = require("dns-prefetch-webpack-plugin");
3
4module.exports = {
5  entry: "index.js",
6  output: {
7    path: __dirname + "/dist",
8    filename: "index_bundle.js",
9  },
10  plugins: [new HtmlWebpackPlugin(), new DnsPrefetchWebpackPlugin()],
11};

Changelog

seehere