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

Wojciech Maj

```

HTML minifier doesn't process generated asset elements

vite.config.js:

import { defineConfig } from "vite";
import viteSimpleHtml from "vite-plugin-simple-html";

export default defineConfig({
    plugins: [
        viteSimpleHtml({
            minify: true,
        }),
    ],
});

index.html:

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
    <head>
        <link rel="stylesheet" type="text/css" href="./main.css" />
        <title>Sample Site</title>
    </head>
</html>

vite build - dist/index.html:

<!doctype html><html lang="en-US" dir="ltr"><head><title>Sample Site</title>  <link rel="stylesheet" crossorigin href="/assets/index-MCPePPYg.css">
</head></html>

Notice the following:

whitespace before the <link> element
a newline after the <link> element

html-minifier-terser's collapseWhitespace should take care of that, but it seems to run before assets get replaced. For reference:

$ ./yarnw dlx html-minifier-terser --collapse-whitespace dist/index.html
<!doctype html><html lang="en-US" dir="ltr"><head><title>Sample Site</title><link rel="stylesheet" crossorigin href="/assets/index-MCPePPYg.css"></head></html>

wojtekmaj / vite-plugin-simple-html Goto Github PK