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.

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	✅	✅
JSON minification	✅	❌
entry script injection	❌	✅
template customization	❌	✅
multi-page support	❌	✅

Why bother?

vite-plugin-simple-html has considerably fewer dependencies. Compare:
- vite-plugin-html dependency graph
- vite-plugin-simple-html dependency graph
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

Wojciech Maj