Vite plugin for HTML processing and minification. "Lite" version of vite-plugin-html, supporting a subset of its features.
- 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.
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,
}),
],
});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,
},
}),
],
});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.
Detailed comparison with vite-plugin-html
| Feature | vite-plugin-simple-html | vite-plugin-html |
|---|---|---|
| EJS support | ✅ | |
| HTML tags injection | ✅ | ✅ |
| HTML/CSS/JS minification | ✅ | ✅ |
| entry script injection | ❌ | ✅ |
| template customization | ❌ | ✅ |
| multi-page support | ❌ | ✅ |
-
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.
The MIT License.
|
Wojciech Maj |