
Research
/Security News
Contagious Interview Campaign Escalates With 67 Malicious npm Packages and New Malware Loader
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
vite-plugin-simple-html
Advanced tools
Vite plugin for HTML processing and minification. "Lite" version of vite-plugin-html, supporting a subset of its features.
npm install vite-plugin-simple-html
or yarn add vite-plugin-simple-html
.import simpleHtmlPlugin from 'vite-plugin-simple-html'
.simpleHtmlPlugin()
to plugins
section of your Vite config.Here's an example of basic configuration:
import { defineConfig } from 'vite';
import simpleHtmlPlugin from 'vite-plugin-simple-html';
export default defineConfig({
plugins: [
simpleHtmlPlugin({
inject: {
data: {
title: 'My app',
script: '<script src="index.js"></script>',
},
tags: [
{
tag: 'meta',
attrs: {
name: 'description',
content: 'My awesome app',
},
},
],
},
minify: true,
}),
],
});
Minification is handled by @swc/html.
To minify your HTML files, set minify
to true
:
import { defineConfig } from 'vite';
import simpleHtmlPlugin from 'vite-plugin-simple-html';
export default defineConfig({
plugins: [
simpleHtmlPlugin({
minify: true,
}),
],
});
The default configuration in this case is:
{
collapseWhitespaces: 'all',
minifyCss: true,
minifyJs: false,
minifyJson: true,
quotes: true,
removeComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: 'all',
tagOmission: false,
}
You can access that configuration by importing defaultMinifyOptions
from the plugin:
import { defaultMinifyOptions } from 'vite-plugin-simple-html';
[!NOTE] The default configuration is designed for compatibility with vite-plugin-html. For more aggressive minification, consider adjusting the settings to better suit your needs.
If you want to customize the minification process, for example to minify JS, you can pass your own configuration object:
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
simpleHtmlPlugin({
minify: {
minifyJs: true,
},
}),
],
});
For a full list of available options, refer to @swc/html documentation.
You can inject variables into your HTML files using EJS syntax.
import { defineConfig } from 'vite';
import simpleHtmlPlugin from 'vite-plugin-simple-html';
export default defineConfig({
plugins: [
simpleHtmlPlugin({
inject: {
data: {
title: 'My app',
},
},
}),
],
});
<!doctype html>
<html lang="en">
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
</body>
</html>
You can inject tags into your HTML files.
import { defineConfig } from 'vite';
import simpleHtmlPlugin from 'vite-plugin-simple-html';
export default defineConfig({
plugins: [
simpleHtmlPlugin({
inject: {
tags: [
{
tag: 'meta',
attrs: {
name: 'description',
content: 'My awesome app',
},
},
],
},
}),
],
});
By default, they are injected at the end of the <head>
section of your HTML file. You can change that behavior by setting injectTo
:
head
: Injects tags at the end of the <head>
section of your HTML file (default).head-prepend
: Injects tags at the beginning of the <head>
section of your HTML file.body
: Injects tags at the end of the <body>
section of your HTML file.body-prepend
: Injects tags at the beginning of the <body>
section of your HTML file.Feature | vite-plugin-simple-html | vite-plugin-html |
---|---|---|
EJS support | ⚠️ Variables only | ✅ |
HTML tags injection | ✅ | ✅ |
HTML/CSS/JS minification | ✅ | ✅ |
JSON minification | ✅ | ❌ |
entry script injection | ❌ | ✅ |
template customization | ❌ | ✅ |
multi-page support | ❌ | ✅ |
vite-plugin-simple-html
has considerably fewer dependencies. Compare:
vite-plugin-simple-html
does not suffer from issue that breaks Vite proxy (which was the reason I created this plugin in the first place).
vite-plugin-simple-html
does not use options deprecated in Vite 5, and thus does not produce deprecation warnings:
WARN plugin 'vite:html' uses deprecated 'enforce' option. Use 'order' option instead.
WARN plugin 'vite:html' uses deprecated 'transform' option. Use 'handler' option instead.
The MIT License.
| Wojciech Maj |
FAQs
Vite plugin for HTML processing and minification
The npm package vite-plugin-simple-html receives a total of 8,842 weekly downloads. As such, vite-plugin-simple-html popularity was classified as popular.
We found that vite-plugin-simple-html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.