vite-plugin-html-template-cleaner

This is a vite plugin which removes extraneous whitespace from template literals containing formatted HTML.

For example, the following method renders an address and the code is formatted for readability.

function renderAddress(addr) {
    return `
        <div>
            <div>${addr.line1}</div>
            <div>${addr.city}, ${addr.state} ${addr.postalCode}</div>
        </div>
    `;
}

After bundling and minifying the code, the whitespace between the HTML tags will still be present.

The html-template-cleaner reduces the above to the following:

function renderAddress(addr) {
    return `<div><div>${addr.line1}</div><div>${addr.city}, ${addr.state} ${addr.postalCode}</div></div>`;
}

Install

npm install vite-plugin-html-template-cleaner

Usage

'use strict';
import { defineConfig } from 'vite';
import { cleanTemplateHtml } from 'vite-plugin-html-template-cleaner';

export default defineConfig({
    root: '.',
    build: {
        outDir: '../public',
        emptyOutDir: true,
    },
    plugins: [
        cleanTemplateHtml(),
    ],
});

All *.js files in the assets directory will be processed by the cleaner. The names of the files will remain the same.

Whitespace Removal

The following whitespace is removed:

• whitespace between > and <
• whitespace between > and ${
• whitespace between } and <