html-minimizer-webpack-plugin weekly downloads statistics

<div align="center"> <a href="https://github.com/webpack/webpack"> <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg"> </a> </div>

[![npm][npm]][npm-url] [![node][node]][node-url] [![tests][tests]][tests-url] [![cover][cover]][cover-url] [![discussion][discussion]][discussion-url] [![size][size]][size-url]

html-minimizer-webpack-plugin

This plugin can use 3 tools to optimize and minify your HTML:

• swc - very fast Rust-based platform for the Web.
• html-minifier-terser (by default) - JavaScript-based HTML minifier.
• @minify-html/node - A Rust HTML minifier meticulously optimised for speed and effectiveness, with bindings for other languages.

This plugin integrates seamlessly into your Webpack build pipeline to reduce HTML size and improve loading performance.

Getting Started

To begin, you'll need to install html-minimizer-webpack-plugin:

npm install html-minimizer-webpack-plugin --save-dev

or

yarn add -D html-minimizer-webpack-plugin

or

pnpm add -D html-minimizer-webpack-plugin

Additional step: If you want to use @swc/html you need to install it:

npm install @swc/html --save-dev

or

yarn add -D @swc/html

or

pnpm add -D @swc/html

Additional step: If you want to use @minify-html/node you need to install it:

npm install @minify-html/node --save-dev

or

yarn add -D @minify-html/node

or

pnpm add -D @minify-html/node

Then add the plugin to your webpack configuration. For example:

webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");
const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        type: "asset/resource",
      },
    ],
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          context: path.resolve(__dirname, "dist"),
          from: "./src/*.html",
        },
      ],
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`

      // For `html-minifier-terser`:
      //
      new HtmlMinimizerPlugin(),

      // For `@swc/html`:
      //
      // HTML documents - HTML documents with `Doctype` and `<html>/`<head>`/`<body>` tags
      //
      // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L5
      //
      // new HtmlMinimizerPlugin({
      //   minify: HtmlMinimizerPlugin.swcMinify,
      //   minimizerOptions: {}
      // })
      //
      //
      // HTML fragments - HTML fragments, i.e. HTML files without doctype or used in `<template></template>` tags or HTML parts which injects into another HTML parts
      //
      // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L38
      //
      // new HtmlMinimizerPlugin({
      //   minify: HtmlMinimizerPlugin.swcMinifyFragment,
      //   minimizerOptions: {}
      // })
    ],
  },
};

[!NOTE]

HTML will only be minimized in production mode by default. To enable minification in development, explicitly set optimization.minimize: true.

Finally, run webpack using the method you normally use (e.g., via CLI or an npm script).

[!NOTE]

Removing and collapsing spaces in the tools differ (by default).

• @swc/html - Remove and collapse whitespaces only in safe places (for example - around html and body elements, inside the head element and between metadata elements - <meta>/script/link/etc.)
• html-minifier-terser - Always collapse multiple whitespaces to 1 space (never remove it entirely), but you can change it using options
• @minify-html/node - Please read documentation https://github.com/wilsonzlin/minify-html#whitespace for detailed whitespace behavior.

Options

• test
• include
• exclude
• parallel
• minify
• minimizerOptions

test

Type:

type test = string | RegExp | (string | RegExp)[];

Default: /\.html(\?.*)?$/i

Test to match files against.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new HtmlMinimizerPlugin({
        test: /\.foo\.html/i,
      }),
    ],
  },
};

include

Type:

type include = string | RegExp | (string | RegExp)[];

Default: undefined

Files to include for minification.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new HtmlMinimizerPlugin({
        include: /\/includes/,
      }),
    ],
  },
};

exclude

Type:

type exclude = string | RegExp | (string | RegExp)[];

Default: undefined

Files to exclude from minification.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new HtmlMinimizerPlugin({
        exclude: /\/excludes/,
      }),
    ],
  },
};

parallel

Type:

type parallel = undefined | boolean | number;

Default: true

Enables multi-process parallelization to improve build performance.

• If true, uses os.cpus().length - 1 or os.availableParallelism() - 1 (if available).

• If number, sets the number of concurrent workers.

[!NOTE]

Parallelization can speed up your build significantly and is therefore highly recommended.

boolean

Enable or disable multi-process parallel running.

webpack.config.js…