{"id":19401785,"url":"https://github.com/webpack-contrib/html-minimizer-webpack-plugin","last_synced_at":"2025-04-13T04:09:00.878Z","repository":{"id":37104101,"uuid":"299645955","full_name":"webpack-contrib/html-minimizer-webpack-plugin","owner":"webpack-contrib","description":"HTML minimizer webpack plugin","archived":false,"fork":false,"pushed_at":"2025-04-07T15:14:28.000Z","size":2395,"stargazers_count":16,"open_issues_count":0,"forks_count":6,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-13T04:08:51.184Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack-contrib.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"webpack"}},"created_at":"2020-09-29T14:39:39.000Z","updated_at":"2025-04-09T10:16:57.000Z","dependencies_parsed_at":"2024-02-20T14:29:35.904Z","dependency_job_id":"f412edc1-d40f-4135-a7fc-174c35ee585d","html_url":"https://github.com/webpack-contrib/html-minimizer-webpack-plugin","commit_stats":{"total_commits":173,"total_committers":10,"mean_commits":17.3,"dds":0.6127167630057804,"last_synced_commit":"cb5af3fd07035947535c7e8f260c052deb2737dc"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fhtml-minimizer-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fhtml-minimizer-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fhtml-minimizer-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fhtml-minimizer-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack-contrib","download_url":"https://codeload.github.com/webpack-contrib/html-minimizer-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248661704,"owners_count":21141450,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T11:19:46.157Z","updated_at":"2025-04-13T04:09:00.833Z","avatar_url":"https://github.com/webpack-contrib.png","language":"JavaScript","funding_links":["https://opencollective.com/webpack"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![cover][cover]][cover-url]\n[![discussion][discussion]][discussion-url]\n[![size][size]][size-url]\n\n# html-minimizer-webpack-plugin\n\nThis plugin can use 3 tools to optimize and minify your HTML:\n\n- [`swc`](https://github.com/swc-project/swc) - very fast Rust-based platform for the Web.\n- [`html-minifier-terser`](https://github.com/terser/html-minifier-terser) (by default) - JavaScript-based HTML minifier.\n- [`@minify-html/node`](https://github.com/wilsonzlin/minify-html) - A Rust HTML minifier meticulously optimised for speed and effectiveness, with bindings for other languages.\n\n## Getting Started\n\nTo begin, you'll need to install `html-minimizer-webpack-plugin`:\n\n```console\nnpm install html-minimizer-webpack-plugin --save-dev\n```\n\nor\n\n```console\nyarn add -D html-minimizer-webpack-plugin\n```\n\nor\n\n```console\npnpm add -D html-minimizer-webpack-plugin\n```\n\n**Additional step**: If you want to use `@swc/html` you need to install it:\n\n```console\nnpm install @swc/html --save-dev\n```\n\nor\n\n```console\nyarn add -D @swc/html\n```\n\nor\n\n```console\npnpm add -D @swc/html\n```\n\n**Additional step**: If you want to use `@minify-html/node` you need to install it:\n\n```console\nnpm install @minify-html/node --save-dev\n```\n\nor\n\n```console\nyarn add -D @minify-html/node\n```\n\nor\n\n```console\npnpm add -D @minify-html/node\n```\n\nThen add the plugin to your `webpack` configuration. For example:\n\n**webpack.config.js**\n\n```js\nconst HtmlMinimizerPlugin = require(\"html-minimizer-webpack-plugin\");\nconst CopyPlugin = require(\"copy-webpack-plugin\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        type: \"asset/resource\",\n      },\n    ],\n  },\n  plugins: [\n    new CopyPlugin({\n      patterns: [\n        {\n          context: path.resolve(__dirname, \"dist\"),\n          from: \"./src/*.html\",\n        },\n      ],\n    }),\n  ],\n  optimization: {\n    minimize: true,\n    minimizer: [\n      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line\n      // `...`\n\n      // For `html-minifier-terser`:\n      //\n      new HtmlMinimizerPlugin(),\n\n      // For `@swc/html`:\n      //\n      // HTML documents - HTML documents with `Doctype` and `\u003chtml\u003e/`\u003chead\u003e`/`\u003cbody\u003e` tags\n      //\n      // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L5\n      //\n      // new HtmlMinimizerPlugin({\n      //   minify: HtmlMinimizerPlugin.swcMinify,\n      //   minimizerOptions: {}\n      // })\n      //\n      //\n      // HTML fragments - HTML fragments, i.e. HTML files without doctype or used in `\u003ctemplate\u003e` tags or HTML parts which injects into another HTML parts\n      //\n      // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L38\n      //\n      // new HtmlMinimizerPlugin({\n      //   minify: HtmlMinimizerPlugin.swcMinifyFragment,\n      //   minimizerOptions: {}\n      // })\n    ],\n  },\n};\n```\n\nThis will enable HTML optimization only in production mode.\nIf you want to run it also in development set the `optimization.minimize` option to `true`.\n\nAnd run `webpack` via your preferred method.\n\n\u003e [!NOTE]\n\u003e\n\u003e Removing and collapsing spaces in the tools differ (by default).\n\u003e\n\u003e - `@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 - `\u003cmeta\u003e`/`script`/`link`/etc.)\n\u003e - `html-minifier-terser` - always collapse multiple whitespaces to 1 space (never remove it entirely), but you can change it using [`options`](https://github.com/terser/html-minifier-terser#options-quick-reference)\n\u003e - `@minify-html/node` - please read documentation https://github.com/wilsonzlin/minify-html#whitespace\n\n## Options\n\n- **[`test`](#test)**\n- **[`include`](#include)**\n- **[`exclude`](#exclude)**\n- **[`parallel`](#parallel)**\n- **[`minify`](#minify)**\n- **[`minimizerOptions`](#minimizerOptions)**\n\n### `test`\n\nType:\n\n```ts\ntype test = string | RegExp | Array\u003cstring | RegExp\u003e;\n```\n\nDefault: `/\\.html(\\?.*)?$/i`\n\nTest to match files against.\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        test: /\\.foo\\.html/i,\n      }),\n    ],\n  },\n};\n```\n\n### `include`\n\nType:\n\n```ts\ntype include = string | RegExp | Array\u003cstring | RegExp\u003e;\n```\n\nDefault: `undefined`\n\nFiles to include.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        include: /\\/includes/,\n      }),\n    ],\n  },\n};\n```\n\n### `exclude`\n\nType:\n\n```ts\ntype exclude = string | RegExp | Array\u003cstring | RegExp\u003e;\n```\n\nDefault: `undefined`\n\nFiles to exclude.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        exclude: /\\/excludes/,\n      }),\n    ],\n  },\n};\n```\n\n### `parallel`\n\nType:\n\n```ts\ntype parallel = undefined | boolean | number;\n```\n\nDefault: `true`\n\nUse multi-process parallel running to improve the build speed.\nDefault number of concurrent runs: `os.cpus().length - 1` or `os.availableParallelism() - 1` (if this function is supported).\n\n\u003e [!NOTE]\n\u003e\n\u003e Parallelization can speed up your build significantly and is therefore **highly recommended**.\n\n#### `boolean`\n\nEnable/disable multi-process parallel running.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        parallel: true,\n      }),\n    ],\n  },\n};\n```\n\n#### `number`\n\nEnable multi-process parallel running and set number of concurrent runs.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        parallel: 4,\n      }),\n    ],\n  },\n};\n```\n\n### `minify`\n\nType:\n\n```ts\ntype minify =\n  | ((\n      data: { [file: string]: string },\n      minimizerOptions: {\n        [key: string]: any;\n      },\n    ) =\u003e {\n      code: string;\n      errors?: unknown[] | undefined;\n      warnings?: unknown[] | undefined;\n    })\n  | ((\n      data: { [file: string]: string },\n      minimizerOptions: {\n        [key: string]: any;\n      },\n    ) =\u003e {\n      code: string;\n      errors?: unknown[] | undefined;\n      warnings?: unknown[] | undefined;\n    })[];\n```\n\nDefault: `HtmlMinimizerPlugin.htmlMinifierTerser`\n\nAllows you to override default minify function.\nBy default, plugin uses [html-minifier-terser](https://github.com/terser/html-minifier-terser) package.\n\nWe currently support:\n\n- `HtmlMinimizerPlugin.swcMinify` (used to compress HTML documents, i.e. with HTML doctype and `\u003chtml\u003e`/`\u003cbody\u003e`/`\u003chead\u003e` tags)\n- `HtmlMinimizerPlugin.swcMinifyFragment` (used to compress HTML fragments, i.e. when you have part of HTML which will be inserted into another HTML parts)\n- `HtmlMinimizerPlugin.htmlMinifierTerser`\n- `HtmlMinimizerPlugin.minifyHtmlNode`\n\n\u003e [!NOTE]\n\u003e\n\u003e The difference between `swcMinify` and `swcMinifyFragment` is the error reporting.\n\u003e 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.\n\nUseful for using and testing unpublished versions or forks.\n\n\u003e [!WARNING]\n\u003e\n\u003e **Always use `require` inside `minify` function when `parallel` option enabled**.\n\n#### `function`\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        minimizerOptions: {\n          collapseWhitespace: true,\n        },\n        minify: (data, minimizerOptions) =\u003e {\n          const htmlMinifier = require(\"html-minifier-terser\");\n          const [[filename, input]] = Object.entries(data);\n\n          return {\n            code: htmlMinifier.minify(input, minimizerOptions),\n            warnings: [],\n            errors: [],\n          };\n        },\n      }),\n    ],\n  },\n};\n```\n\n#### `array`\n\nIf an array of functions is passed to the `minify` option, the `minimizerOptions` can be an array or an object.\nIf `minimizerOptions` is array, the function index in the `minify` array corresponds to the options object with the same index in the `minimizerOptions` array.\nIf you use `minimizerOptions` like object, all `minify` function accept it.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        minimizerOptions: [\n          // Options for the first function (HtmlMinimizerPlugin.htmlMinifierTerser)\n          {\n            collapseWhitespace: true,\n          },\n          // Options for the second function\n          {},\n        ],\n        minify: [\n          HtmlMinimizerPlugin.htmlMinifierTerser,\n          (data, minimizerOptions) =\u003e {\n            const [[filename, input]] = Object.entries(data);\n            // To do something\n            return {\n              code: `optimised code`,\n              warnings: [],\n              errors: [],\n            };\n          },\n        ],\n      }),\n    ],\n  },\n};\n```\n\n### `minimizerOptions`\n\nType:\n\n```ts\ntype minimizerOptions =\n  | {\n      [key: string]: any;\n    }\n  | Array\u003c{\n      [key: string]: any;\n    }\u003e;\n```\n\nDefault: `{ caseSensitive: true, collapseWhitespace: true, conservativeCollapse: true, keepClosingSlash: true, minifyCSS: true, minifyJS: true, removeComments: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, }`\n\n`Html-minifier-terser` optimizations [options](https://github.com/terser/html-minifier-terser#options-quick-reference).\n\n#### `object`\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        minimizerOptions: {\n          collapseWhitespace: false,\n        },\n      }),\n    ],\n  },\n};\n```\n\n#### `array`\n\nThe function index in the `minify` array corresponds to the options object with the same index in the `minimizerOptions` array.\nIf you use `minimizerOptions` like object, all `minify` function accept it.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        minimizerOptions: [\n          // Options for the first function (HtmlMinimizerPlugin.htmlMinifierTerser)\n          {\n            collapseWhitespace: true,\n          },\n          // Options for the second function\n          {},\n        ],\n        minify: [\n          HtmlMinimizerPlugin.htmlMinifierTerser,\n          (data, minimizerOptions) =\u003e {\n            const [[filename, input]] = Object.entries(data);\n            // To do something\n            return {\n              code: `optimised code`,\n              warnings: [],\n              errors: [],\n            };\n          },\n        ],\n      }),\n    ],\n  },\n};\n```\n\n## Examples\n\n### `swc/html`\n\nAvailable [`options`](https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L5).\n\nHTML Documents:\n\n```js\nconst HtmlMinimizerPlugin = require(\"html-minimizer-webpack-plugin\");\nconst CopyPlugin = require(\"copy-webpack-plugin\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        type: \"asset/resource\",\n      },\n    ],\n  },\n  plugins: [\n    new CopyPlugin({\n      patterns: [\n        {\n          context: path.resolve(__dirname, \"dist\"),\n          from: \"./src/*.html\",\n        },\n      ],\n    }),\n  ],\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        minify: HtmlMinimizerPlugin.swcMinify,\n        minimizerOptions: {\n          // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L5\n        },\n      }),\n    ],\n  },\n};\n```\n\nHTML Fragments:\n\n```js\nconst HtmlMinimizerPlugin = require(\"html-minimizer-webpack-plugin\");\nconst CopyPlugin = require(\"copy-webpack-plugin\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        type: \"asset/resource\",\n      },\n    ],\n  },\n  plugins: [\n    new CopyPlugin({\n      patterns: [\n        {\n          context: path.resolve(__dirname, \"dist\"),\n          from: \"./src/*.html\",\n        },\n      ],\n    }),\n  ],\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        test: /\\.template\\.html$/i,\n        minify: HtmlMinimizerPlugin.swcMinifyFragment,\n        minimizerOptions: {\n          // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L38\n        },\n      }),\n    ],\n  },\n};\n```\n\n### `@minify-html/node`\n\nAvailable [`options`](https://github.com/wilsonzlin/minify-html#minification).\n\nHTML Documents:\n\n```js\nconst HtmlMinimizerPlugin = require(\"html-minimizer-webpack-plugin\");\nconst CopyPlugin = require(\"copy-webpack-plugin\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        type: \"asset/resource\",\n      },\n    ],\n  },\n  plugins: [\n    new CopyPlugin({\n      patterns: [\n        {\n          context: path.resolve(__dirname, \"dist\"),\n          from: \"./src/*.html\",\n        },\n      ],\n    }),\n  ],\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new HtmlMinimizerPlugin({\n        minify: HtmlMinimizerPlugin.minifyHtmlNode,\n        minimizerOptions: {\n          // Options - https://github.com/wilsonzlin/minify-html#minification\n        },\n      }),\n    ],\n  },\n};\n```\n\nYou can use multiple `HtmlMinimizerPlugin` plugins to compress different files with the different `minify` function.\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/html-minimizer-webpack-plugin.svg\n[npm-url]: https://npmjs.com/package/html-minimizer-webpack-plugin\n[node]: https://img.shields.io/node/v/html-minimizer-webpack-plugin.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/webpack-contrib/html-minimizer-webpack-plugin/workflows/html-minimizer-webpack-plugin/badge.svg\n[tests-url]: https://github.com/webpack-contrib/html-minimizer-webpack-plugin/actions\n[cover]: https://codecov.io/gh/webpack-contrib/html-minimizer-webpack-plugin/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/html-minimizer-webpack-plugin\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\n[size]: https://packagephobia.now.sh/badge?p=html-minimizer-webpack-plugin\n[size-url]: https://packagephobia.now.sh/result?p=html-minimizer-webpack-plugin\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fhtml-minimizer-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack-contrib%2Fhtml-minimizer-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fhtml-minimizer-webpack-plugin/lists"}