Vite-plugin-simple-html NPM

downloads

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

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-html has fewer dependencies.
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

vite vite-plugin plugin html

html-minifier-terser

@everything-registry/sub-chunk-3061

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago