vite-plugin-simple-html
Vite plugin for HTML processing and minification. "Lite" version of vite-plugin-html, supporting a subset of its features.
tl;dr
- Install by executing
npm install vite-plugin-simple-html or yarn add vite-plugin-simple-html.
- Import by adding
import simpleHtmlPlugin from 'vite-plugin-simple-html'.
- Use it by adding
simpleHtmlPlugin() to plugins section of your Vite config.
Usage
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,
}),
],
});
User guide
Minification
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.
EJS variables support
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>
Tag injection
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 | ❌ | ✅ |
Why bother?
-
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.
License
The MIT License.
Author
