HTML Minification in Webpack, Vite, and Build Tools

Automatically minify HTML during your build process using html-webpack-plugin, Vite's built-in minification, Rollup, and Next.js. Includes configuration for removing comments,...

Mian Ali Khalid · 2026-05-11 · 4 min read

Use the tool

HTML / CSS / JS Minifier

Minify HTML, CSS, or JavaScript. Strips whitespace, comments, and unnecessary characters. Shows size reduction percentage.

Open HTML / CSS / JS Minifier →

Build tools can minify HTML automatically so you don’t have to do it manually. Here’s how to configure HTML minification in Webpack, Vite, Next.js, and other common build setups.

Use the HTML Minifier to minify HTML manually or test minification options.

Webpack with html-webpack-plugin

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,    // removes type="text/javascript"
        removeStyleLinkTypeAttributes: true,  // removes type="text/css"
        useShortDoctype: true,               // <!DOCTYPE html>
        minifyCSS: true,                     // minify inline CSS
        minifyJS: true,                      // minify inline JS
        collapseInlineTagWhitespace: false,  // safer for inline elements
      },
    }),
  ],
};

In Webpack’s production mode, html-webpack-plugin enables minification by default — the minify option above lets you customize what’s applied.

Vite HTML minification

Vite 4+ uses html-minifier-terser by default in production builds:

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: true,  // minifies JS/CSS; HTML is minified separately
  },
  plugins: [
    {
      name: 'html-transform',
      transformIndexHtml: {
        order: 'post',
        handler(html) {
          // Called after Vite's own HTML processing
          // Add custom transforms here if needed
          return html;
        },
      },
    },
  ],
});

For custom HTML minification in Vite:

// vite.config.ts
import { defineConfig } from 'vite';
import { minify } from 'html-minifier-terser';

export default defineConfig({
  plugins: [
    {
      name: 'minify-html',
      apply: 'build',
      async transformIndexHtml(html) {
        return minify(html, {
          collapseWhitespace: true,
          removeComments: true,
          minifyCSS: true,
          minifyJS: true,
        });
      },
    },
  ],
});

Next.js

Next.js minifies HTML output automatically in production (next build). No configuration needed.

For custom HTML structure, use next.config.js:

// next.config.js
module.exports = {
  // HTML is minified by default in production
  // Remove HTML comments from output:
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  
  // Custom headers / rewrites don't affect HTML minification
};

If you need to inspect what Next.js outputs:

next build
# Check .next/server/pages/ for the minified HTML

Astro

Astro minifies HTML by default in production using @astrojs/compiler:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  build: {
    // HTML minification is on by default; turn off for debugging:
    // (no official flag in Astro 4+ — it always minifies in production)
  },
  compressHTML: true,  // Astro 2+ explicit option (default: true)
});

Rollup / generic build scripts

// rollup.config.mjs
import { minify } from 'html-minifier-terser';
import { readFileSync, writeFileSync } from 'fs';
import { glob } from 'glob';

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

// Post-build: minify all HTML in dist/
async function minifyHtmlFiles() {
  const files = await glob('dist/**/*.html');
  for (const file of files) {
    const html = readFileSync(file, 'utf-8');
    const minified = await minify(html, MINIFY_OPTIONS);
    writeFileSync(file, minified);
    const saving = ((1 - minified.length / html.length) * 100).toFixed(1);
    console.log(`${file}: ${saving}% reduction`);
  }
}

minifyHtmlFiles();

npm script approach

{
  "scripts": {
    "build": "tsc && vite build",
    "postbuild": "node scripts/minify-html.mjs"
  }
}

// scripts/minify-html.mjs
import { minify } from 'html-minifier-terser';
import { readFile, writeFile } from 'fs/promises';
import { glob } from 'glob';

const files = await glob('dist/**/*.html');
for (const file of files) {
  const html = await readFile(file, 'utf-8');
  const result = await minify(html, {
    collapseWhitespace: true,
    removeComments: true,
    minifyCSS: true,
    minifyJS: true,
  });
  await writeFile(file, result);
}

HTML Minifier — minify HTML online without build tools
HTML Minification Performance — impact on Core Web Vitals
GZIP Compression for HTML — server-side compression

Critical CSS Inlining — Eliminate Render-Blocking CSS for Faster Load — Critical CSS inlining embeds above-the-fold styles directly in HTML to eliminate…
GZIP Compression for HTML — How It Works and How to Enable It — GZIP compression reduces HTML file size by 60-80% before sending to browsers. Le…
HTML Comments Guide — Syntax, Uses, and When Minifiers Remove Them — HTML comments use  syntax and are removed by minifiers unless they're co…
HTML Minification and Web Performance — Core Web Vitals Impact — HTML minification reduces page size, but its impact on Core Web Vitals depends o…
HTML Whitespace — How Browsers Handle Spaces and How to Remove Them — HTML collapses multiple spaces into one and ignores most line breaks. Understand…

Related tool