HTMLMinifier-Terser

7.2.0 · active · verified Sun Apr 19

HTMLMinifier-Terser is a highly configurable, well-tested JavaScript-based HTML minifier designed to optimize web page load times by significantly reducing the size of HTML, CSS, and JavaScript within HTML documents. The current stable version is 7.2.0, with regular updates addressing bug fixes, dependency updates, and minor feature enhancements. Major versions, like v7.0.0, introduce significant breaking changes such as the migration to ESM and updated Node.js requirements. It differentiates itself through extensive configurability, allowing fine-grained control over the minification process, and its strong performance compared to other minifiers, often yielding smaller output sizes as demonstrated in its minification comparison benchmarks.

Common errors

```
ERR_REQUIRE_ESM: require() of ES Module .../html-minifier-terser/dist/htmlminifier.js from ... not supported.
```
cause Attempting to `require()` the package in a CommonJS module while it has been transitioned to primarily ESM in v7.

fix Convert your consuming module to ESM by adding `"type": "module"` to your `package.json` or changing your file extension to `.mjs`. Alternatively, use dynamic `import()`: `const { minify } = await import('html-minifier-terser');`
```
TypeError: Cannot read properties of undefined (reading 'split')
```
cause This can occur if the input HTML passed to `minify` is not a string or is `undefined`.

fix Ensure the first argument passed to `minify` is always a valid string containing the HTML to be minified.

Warnings

breaking Version 7.0.0 migrated the build tool to Rollup, replaced the `he` dependency with `entities`, and rewrote the package to primarily support ESM. This impacts how the package is imported and consumed.
Fix: Update your import statements to use ESM syntax (e.g., `import { minify } from 'html-minifier-terser';`). If you are in a CJS environment, ensure your build setup correctly handles dual ESM/CJS packages.
breaking The minimum required Node.js version was increased to `v14.13.1` or `>=16.0.0` with the release of v7.0.0.
Fix: Upgrade your Node.js environment to a compatible version (v14.13.1 or v16.0.0 or greater) before upgrading to `html-minifier-terser@7.x`.
gotcha Almost all minification options are disabled by default. Users must explicitly enable options like `collapseWhitespace`, `removeComments`, `minifyJS`, and `minifyCSS` to achieve desired minification levels.
Fix: Carefully review the documentation for available options and enable them based on your project's minification requirements.
gotcha Using the CLI via `html-minifier-terser` requires installing the package globally or using `npx`. For programmatic use, install it as a local dependency.
Fix: For CLI, run `npm install -g html-minifier-terser` or `npx html-minifier-terser`. For programmatic use, `npm install html-minifier-terser`.

Install

npm install html-minifier-terser npm
yarn add html-minifier-terser yarn
pnpm add html-minifier-terser pnpm

Imports

minify
wrong:
```
const { minify } = require('html-minifier-terser');
```
correct:
```
import { minify } from 'html-minifier-terser';
```
Since v7.0.0, the package primarily supports ESM. While CJS exports are provided, ESM is the recommended approach for modern Node.js applications.
minify with async options
```
import { minify } from 'html-minifier-terser';
// ... later await minify(html, { minifyCSS: { level: 2 } })
```
Asynchronous CSS minification (`minifyCSS`) is supported since v7.0.0-alpha.2, requiring an `await` call if async options are used.

Quickstart

This quickstart demonstrates how to programmatically minify HTML using various common options like collapsing whitespace, removing comments, and minifying embedded JavaScript and CSS.

import { minify } from 'html-minifier-terser';

async function runMinification() {
  const htmlInput = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Test Page</title>
      <style>body { color: red; } /* important */</style>
    </head>
    <body>
      <!-- This is a comment -->
      <p title="  some title  " id="moo">Hello, world!  </p>
      <script>  function greet() { console.log('Hi!'); }  </script>
    </body>
    </html>
  `;

  const minifiedHtml = await minify(htmlInput, {
    removeComments: true,
    collapseWhitespace: true,
    minifyJS: true,
    minifyCSS: true,
    removeAttributeQuotes: true,
    processConditionalComments: true,
  });

  console.log(minifiedHtml);
  // Expected output (approx): "<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Test Page</title><style>body{color:red}</style></head><body><p title=some title id=moo>Hello, world!</p><script>function greet(){console.log('Hi!')}</script></body></html>"
}

runMinification();

view raw JSON →