Gathering detailed insights and metrics for @principalstudio/html-webpack-inject-preload
Gathering detailed insights and metrics for @principalstudio/html-webpack-inject-preload
Installations
npm install @principalstudio/html-webpack-inject-preloadDeveloper
principalstudio
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
>=10.23
Typescript Support
Yes
Node Version
12.20.2
NPM Version
7.6.0
Statistics
31 Stars
38 Commits
4 Forks
4 Watching
1 Branches
3 Contributors
Updated on 05 Oct 2024
Bundle Size
1.69 kB
Minified
850.00 B
Minified + Gzipped
Languages
TypeScript (81.42%)
HTML (11.57%)
CSS (4%)
JavaScript (3.02%)
Total Downloads
Cumulative downloads
Total Downloads
1,511,929
Last day
-10.1%
2,515
Compared to previous day
Last week
-3.4%
13,090
Compared to previous week
Last month
-14.1%
63,692
Compared to previous month
Last year
67.7%
712,288
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
HTML Webpack Inject Preload
A HTML Webpack Plugin for injecting <link rel='preload'>
This plugin allows to add preload links anywhere you want.
Installation
You need to have HTMLWebpackPlugin v4 or v5 to make this plugin work.
npm i -D @principalstudio/html-webpack-inject-preload
webpack.config.js
1const HtmlWebpackPlugin = require('html-webpack-plugin'); 2const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload'); 3 4module.exports = { 5 entry: 'index.js', 6 output: { 7 path: __dirname + '/dist', 8 filename: 'index_bundle.js' 9 }, 10 plugins: [ 11 new HtmlWebpackPlugin(), 12 new HtmlWebpackInjectPreload({ 13 files: [ 14 { 15 match: /.*\.woff2$/, 16 attributes: {as: 'font', type: 'font/woff2', crossorigin: true }, 17 }, 18 { 19 match: /vendors\.[a-z-0-9]*.css$/, 20 attributes: {as: 'style' }, 21 }, 22 ] 23 }) 24 ] 25}
Options
- files: An array of files object
- match: A regular expression to target files you want to preload
- attributes: Any attributes you want to use. The plugin will add the attribute
rel="preload"by default.
Usage
The plugin is really simple to use. The plugin injects in headTags, before any link, the preload elements.
For example
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Webpack App</title> 6 <%= htmlWebpackPlugin.tags.headTags %> 7 </head> 8 <body> 9 <script src="index_bundle.js"></script> 10 </body> 11</html>
will generate
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Webpack App</title> 6 <link href="dist/fonts/font.woff2" rel="preload" type="font/woff2" crossorigin> 7 <link href="dist/css/main.css"> 8 </head> 9 <body> 10 <script src="index_bundle.js"></script> 11 </body> 12</html>
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 1/16 approved changesets -- score normalized to 0
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
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
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
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 23 are checked with a SAST tool
Score
3
/10
Last Scanned on 2024-11-18
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