Movatterモバイル変換

[0]ホーム
URL:

webpack logo
ag grid
ag charts

HtmlMinimizerWebpackPlugin

Disclaimer: HtmlMinimizerWebpackPlugin is a third-party package maintained by community members, it potentially does not have the same support, security policy or license as webpack, and it is not maintained by webpack.

npmnodetestscoverdiscussionsize

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 installhtml-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 yourwebpack 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:[newCopyPlugin({      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`://newHtmlMinimizerPlugin(),// 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 setoptimization.minimize: true.

Finally, runwebpack 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 - aroundhtml andbody elements, inside thehead 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 usingoptions
  • @minify-html/node - Please read documentationhttps://github.com/wilsonzlin/minify-html#whitespace for detailed whitespace behavior.

Options

test

Type:

typetest=string| RegExp|(string| RegExp)[];

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

Test to match files against.

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

include

Type:

typeinclude=string| RegExp|(string| RegExp)[];

Default:undefined

Files to include for minification.

webpack.config.js

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

exclude

Type:

typeexclude=string| RegExp|(string| RegExp)[];

Default:undefined

Files to exclude from minification.

webpack.config.js

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

parallel

Type:

typeparallel=undefined|boolean|number;

Default:true

Enables multi-process parallelization to improve build performance.

  • Iftrue, usesos.cpus().length - 1 oros.availableParallelism() - 1 (if available).

  • Ifnumber, sets the number of concurrent workers.

[!NOTE]

Parallelization can speed up your build significantly and is thereforehighly recommended.

boolean

Enable or disable multi-process parallel running.

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newHtmlMinimizerPlugin({        parallel:true,}),],},};

number

Enable multi-process parallel running and set number of concurrent runs.

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newHtmlMinimizerPlugin({        parallel:4,}),],},};

minify

Type:

typeminify=|((      data: Record<string,string>,      minimizerOptions: Record<string,any>,)=>{      code:string;      errors?:unknown[]|undefined;      warnings?:unknown[]|undefined;})|((      data: Record<string,string>,      minimizerOptions: Record<string,any>,)=>{      code:string;      errors?:unknown[]|undefined;      warnings?:unknown[]|undefined;})[];

Default:HtmlMinimizerPlugin.htmlMinifierTerser

Allows you to override default minify function.By default, plugin useshtml-minifier-terser package.

We currently support:

  • HtmlMinimizerPlugin.swcMinify (used to compress HTML documents, i.e. with HTML doctype and<html>/<body>/<head> tags)
  • HtmlMinimizerPlugin.swcMinifyFragment (used to compress HTML fragments, i.e. when you have part of HTML which will be inserted into another HTML parts)
  • HtmlMinimizerPlugin.htmlMinifierTerser
  • HtmlMinimizerPlugin.minifyHtmlNode

[!NOTE]

The difference betweenswcMinify andswcMinifyFragment is the error reporting.You will get errors (invalid or broken syntax) if you have them in your HTML document or fragment. Which allows you to see all the errors and problems at the build stage.

Useful for using and testing unpublished versions or forks.

[!WARNING]

Always userequire insideminify function whenparallel option enabled.

function

You can define a custom minify function, giving full control over how the HTML is processed.

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newHtmlMinimizerPlugin({        minimizerOptions:{          collapseWhitespace:true,},minify:(data, minimizerOptions)=>{const htmlMinifier=require("html-minifier-terser");const[[filename, input]]= Object.entries(data);return{            code: htmlMinifier.minify(input, minimizerOptions),            warnings:[],            errors:[],};},}),],},};

array

If an array of functions is passed to theminify option, theminimizerOptions can be either as:

  • An array; IfminimizerOptions is array, the function index in theminify array corresponds to the options object with the same index in theminimizerOptions array.

  • A single object; If you useminimizerOptions like object, allminify function accept it.

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newHtmlMinimizerPlugin({        minimizerOptions:[// Options for the first function (HtmlMinimizerPlugin.htmlMinifierTerser){            collapseWhitespace:true,},// Options for the second function{},],        minify:[          HtmlMinimizerPlugin.htmlMinifierTerser,(data, minimizerOptions)=>{const[[filename, input]]= Object.entries(data);// To do somethingreturn{              code:"optimised code",              warnings:[],              errors:[],};},],}),],},};

minimizerOptions

Type:

typeminimizerOptions= Record<string,any>| Record<string,any>[];

Default:

{caseSensitive:true,collapseWhitespace:true,conservativeCollapse:true,keepClosingSlash:true,minifyCSS:true,minifyJS:true,removeComments:true,removeScriptTypeAttributes:true,removeStyleLinkTypeAttributes:true,}

Html-minifier-terser optimizationsoptions.

object

Applies the same options to the default or customminify function.

module.exports={  optimization:{    minimize:true,    minimizer:[newHtmlMinimizerPlugin({        minimizerOptions:{          collapseWhitespace:false,},}),],},};

array

The function index in theminify array corresponds to the options object with the same index in theminimizerOptions array.If you useminimizerOptions like object, allminify function accept it.

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newHtmlMinimizerPlugin({        minimizerOptions:[// Options for the first function (HtmlMinimizerPlugin.htmlMinifierTerser){            collapseWhitespace:true,},// Options for the second function{},],        minify:[          HtmlMinimizerPlugin.htmlMinifierTerser,(data, minimizerOptions)=>{const[[filename, input]]= Object.entries(data);// To do somethingreturn{              code:"optimised code",              warnings:[],              errors:[],};},],}),],},};

Examples

swc/html

Availableoptions.

HTML Documents:

const CopyPlugin=require("copy-webpack-plugin");const HtmlMinimizerPlugin=require("html-minimizer-webpack-plugin");module.exports={  module:{    rules:[{        test:/\.html$/i,        type:"asset/resource",},],},  plugins:[newCopyPlugin({      patterns:[{          context: path.resolve(__dirname,"dist"),from:"./src/*.html",},],}),],  optimization:{    minimize:true,    minimizer:[newHtmlMinimizerPlugin({        minify: HtmlMinimizerPlugin.swcMinify,        minimizerOptions:{// Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L5},}),],},};

HTML Fragments:

Use this for partial HTML files (e.g. inside<template></template> tags or HTML strings).

const path=require("node:path");const CopyPlugin=require("copy-webpack-plugin");const HtmlMinimizerPlugin=require("html-minimizer-webpack-plugin");module.exports={  module:{    rules:[{        test:/\.html$/i,        type:"asset/resource",},],},  plugins:[newCopyPlugin({      patterns:[{          context: path.resolve(__dirname,"dist"),from:"./src/*.html",},],}),],  optimization:{    minimize:true,    minimizer:[newHtmlMinimizerPlugin({        test:/\.template\.html$/i,        minify: HtmlMinimizerPlugin.swcMinifyFragment,        minimizerOptions:{// Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L38},}),],},};

@minify-html/node

Availableoptions.

HTML Documents:

const CopyPlugin=require("copy-webpack-plugin");const HtmlMinimizerPlugin=require("html-minimizer-webpack-plugin");module.exports={  module:{    rules:[{        test:/\.html$/i,        type:"asset/resource",},],},  plugins:[newCopyPlugin({      patterns:[{          context: path.resolve(__dirname,"dist"),from:"./src/*.html",},],}),],  optimization:{    minimize:true,    minimizer:[newHtmlMinimizerPlugin({        minify: HtmlMinimizerPlugin.minifyHtmlNode,        minimizerOptions:{// Options - https://github.com/wilsonzlin/minify-html#minification},}),],},};

You can use multipleHtmlMinimizerPlugin plugins to compress different files with the differentminify function.

Contributing

We welcome all contributions!If you're new here, please take a moment to review our contributing guidelines before submitting issues or pull requests.

CONTRIBUTING

License

MIT

[8]ページ先頭
©2009-2025 Movatter.jp