Minify HTML in JavaScript: html-minifier-terser Guide

Automating HTML minification in a JavaScript build pipeline ensures every page you deploy is as lean as possible without any manual intervention. The html-minifier-terser package is the most actively maintained and widely adopted solution for Node.js-based HTML compression.

How to Use the HTML Minifier Tool

1. For quick one-off minification, use the HTML Minifier on ToolSparkr — no setup needed.
2. Paste your markup and click \"Minify HTML\" for an instant result.
3. For automated workflows, integrate the code examples below into your Node.js build script or static site generator.
4. Copy the minified output into your deployment or CI/CD pipeline.

Minifying HTML with html-minifier-terser

html-minifier-terser is a fork of the original html-minifier, maintained with modern Node.js and async support:

// npm install html-minifier-terser
const { minify } = require('html-minifier-terser');
const fs = require('fs');

async function minifyHtml(inputFile, outputFile) {
  const html = fs.readFileSync(inputFile, 'utf8');

  const minified = await minify(html, {
    collapseWhitespace: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    useShortDoctype: true,
    minifyCSS: true,    // also minify inline <style> blocks
    minifyJS: true      // also minify inline <script> blocks
  });

  fs.writeFileSync(outputFile, minified);
  console.log(`${inputFile}: ${html.length} -> ${minified.length} bytes`);
}

minifyHtml('index.html', 'dist/index.html');

Batch Processing Multiple HTML Files

For static sites with many pages, process an entire directory in a loop:

const { minify } = require('html-minifier-terser');
const fs   = require('fs');
const path = require('path');
const glob = require('glob');

const options = {
  collapseWhitespace: true,
  removeComments: true,
  minifyCSS: true,
  minifyJS: true
};

(async () => {
  const files = glob.sync('dist/**/*.html');
  for (const file of files) {
    const html     = fs.readFileSync(file, 'utf8');
    const minified = await minify(html, options);
    fs.writeFileSync(file, minified);
    console.log(`Minified: ${file}`);
  }
})();

Why Minify HTML in JavaScript?

• Next.js / Gatsby / Astro integration — Post-build HTML minification is a common step in static site generation workflows.
• Inline resource compression — html-minifier-terser can also shrink inline <style> and <script> blocks in the same pass.
• Automated CI/CD — Run minification as a build step so production artifacts are always optimised.
• Configurable aggressiveness — Fine-tune options to balance size savings against compatibility requirements.

Tips and Best Practices

• Enable conservativeCollapse: true if you have whitespace-sensitive inline elements like <span> or <a> inside text — this prevents rendering differences.
• Avoid removeOptionalTags: true unless you have thorough browser compatibility testing in place.
• Combine HTML minification with server-level Brotli compression for the best transfer size reduction.
• Run a visual diff or screenshot comparison tool after minification to catch unexpected rendering changes.

For instant HTML compression without any Node.js setup, the free online HTML Minifier on ToolSparkr is ready to use.