🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

html-webpack-preconnect-plugin

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

html-webpack-preconnect-plugin

Embed <link rel="preconnect"> into HtmlWebpackPlugin pages

1.2.1
latest
Source
npm
Version published
Weekly downloads
4.7K
3%
Maintainers
1
Weekly downloads
 
Created
Source

npm

Html Webpack Preconnect Plugin

This extension plugin embeds <link rel="preconnect"> tags into HTML files generated by the HtmlWebpackPlugin. Supported in Webpack 3/4

Introduction

The preconnect can be pre-connected api server without having to wait for javascript loading and execute request, save a little time for users.

https://www.keycdn.com/support/preconnect

image source: keycdn

Document

The preconnect link relation type is used to indicate an origin that will be used to fetch required resources. Initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, allows the user agent to mask the high latency costs of establishing a connection.

https://www.w3.org/TR/resource-hints/#preconnect

blog: Eliminating Roundtrips with Preconnect

Browser compatibility

Chrome/Firefox/Android have been supported, IE/Edge/Safari not yet.

https://caniuse.com/#feat=link-rel-preconnect

Install

npm install html-webpack-preconnect-plugin --save-dev

Usage

Add the plugin to your webpack config:

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackPreconnectPlugin = require('html-webpack-preconnect-plugin')

// webpack config
{
  ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',

      // set the preconnect origins
      preconnect: [
        'https://api1.example.com',
        'http://api2.example.com',
      ]
    }),

    // another HTML entry
    new HtmlWebpackPlugin({
      filename: 'index2.html',
      preconnect: [
        'http://api2.example.com',
      ]
    }),

    // enabled preconnect plugin
    new HtmlWebpackPreconnectPlugin(),
  ]
}

Then the dist/index.html will contain:

<head>
  ...
  <link rel="preconnect" href="https://api1.example.com">
  <link rel="preconnect" href="http://api2.example.com">
</head>

HOW TO TEST

https://www.webpagetest.org

Run your page through webpagetest.org. Requests to the domains you specified in your dns-prefetch or preconnect tags should begin sooner because the initial connection will have been established. stackoverflow

Keywords

webpack
plugin
html-webpack-plugin
preconnect
dns-prefetch

FAQs

Package last updated on 27 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

MCP Community Begins Work on Official MCP Metaregistry

Security News

MCP Community Begins Work on Official MCP Metaregistry

The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.

By Sarah Gooding  -  May 09, 2025