Gathering detailed insights and metrics for html-webpack-preconnect-plugin
Gathering detailed insights and metrics for html-webpack-preconnect-plugin
injecting <link rel="preconnect"> into HtmlWebpackPlugin pages
Installations
npm install html-webpack-preconnect-pluginDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
6.17.1
NPM Version
3.10.10
Releases
2
Languages
2
JavaScript
HTML
JavaScript (96.58%)
HTML (3.42%)
Developer
joaner
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
7 Stars
37 Commits
5 Forks
3 Watchers
4 Branches
2 Contributors
Updated on Jun 27, 2023
Maintainers
1
Package Meta Information
Latest Version
1.2.1
Package Id
html-webpack-preconnect-plugin@1.2.1
Unpacked Size
63.03 kB
Size
44.98 kB
File Count
14
NPM Version
3.10.10
Node Version
6.17.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Dev Dependencies
3
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.
image source: keycdn
Document
The
preconnectlink 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
1npm install html-webpack-preconnect-plugin --save-dev
Usage
Add the plugin to your webpack config:
1var HtmlWebpackPlugin = require('html-webpack-plugin') 2var HtmlWebpackPreconnectPlugin = require('html-webpack-preconnect-plugin') 3 4// webpack config 5{ 6 ... 7 plugins: [ 8 new HtmlWebpackPlugin({ 9 filename: 'index.html', 10 11 // set the preconnect origins 12 preconnect: [ 13 'https://api1.example.com', 14 'http://api2.example.com', 15 ] 16 }), 17 18 // another HTML entry 19 new HtmlWebpackPlugin({ 20 filename: 'index2.html', 21 preconnect: [ 22 'http://api2.example.com', 23 ] 24 }), 25 26 // enabled preconnect plugin 27 new HtmlWebpackPreconnectPlugin(), 28 ] 29}
Then the dist/index.html will contain:
1<head> 2 ... 3 <link rel="preconnect" href="https://api1.example.com"> 4 <link rel="preconnect" href="http://api2.example.com"> 5</head>
HOW TO TEST
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
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
Found 2/17 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 17 are checked with a SAST tool
Score
2.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More