vite-plugin-simple-html
v0.1.2
Published
Vite plugin for HTML processing and minification
Downloads
16,481
Readme
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-htmloryarn add vite-plugin-simple-html. - Import by adding
import simpleHtmlPlugin from 'vite-plugin-simple-html'. - Use it by adding
simpleHtmlPlugin()topluginssection 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
HTML minification is done using html-minifier-terser.
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:
{
collapseWhitespace: true,
keepClosingSlash: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
minifyCSS: true,
}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,
},
}),
],
});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.
Detailed comparison with vite-plugin-html
| Feature | vite-plugin-simple-html | vite-plugin-html | | ------------------------ | ----------------------- | ---------------- | | EJS support | ⚠️ Variables only | ✅ | | HTML tags injection | ✅ | ✅ | | HTML/CSS/JS minification | ✅ | ✅ | | entry script injection | ❌ | ✅ | | template customization | ❌ | ✅ | | multi-page support | ❌ | ✅ |
Why bother?
vite-plugin-simple-htmlhas fewer dependencies.vite-plugin-simple-htmldoes not suffer from issue that breaks Vite proxy (which was the reason I created this plugin in the first place).vite-plugin-simple-htmldoes 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.