npmpackage.info

Gathering detailed insights and metrics for html-minimizer-webpack-plugin

Other packages similar to html-minimizer-webpack-plugin

css-minimizer-webpack-plugin

7.0.0

CSS minimizer (minifier) plugin for Webpack

image-minimizer-webpack-plugin

4.1.1

Webpack loader and plugin to optimize (compress) images using imagemin

terser-webpack-plugin

5.3.10

Terser plugin for webpack

optimize-css-assets-webpack-plugin

6.0.1

A Webpack plugin to optimize \ minimize CSS assets.

Gathering detailed insights and metrics for html-minimizer-webpack-plugin

html-minimizer-webpack-plugin

HTML minimizer webpack plugin

5.0.0

MIT

JavaScript

1,064,612 5.7

Installations

npm install html-minimizer-webpack-plugin

Pull Requests

Open

0

Total

144

Closed

7

Merged

137

Issues

Open

0

Total

0

Closed

0

Releases

v5.0.0

Published on 17 Jan 2024

v4.4.0

Published on 10 Jun 2023

v4.3.0

Published on 13 Oct 2022

v4.2.1

Published on 06 Oct 2022

v4.2.0

Published on 29 Sept 2022

v4.1.0

Published on 17 Aug 2022

View all 20 releases

Developer

webpack-contrib

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>= 18.12.0

Typescript Support

Yes

Node Version

18.19.0

NPM Version

10.2.3 Statistics

15 Stars

206 Commits

6 Forks

10 Watching

1 Branches

25 Contributors

Updated on 20 Nov 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

1,064,612

Last day

33.3%

3,071

Compared to previous day

Last week

6.5%

13,829

Compared to previous week

Last month

34.7%

50,958

Compared to previous month

Last year

15.2%

436,980

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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.

Getting Started

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

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

1yarn add -D html-minimizer-webpack-plugin

1pnpm add -D html-minimizer-webpack-plugin

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

1npm install @swc/html --save-dev

1yarn add -D @swc/html

1pnpm add -D @swc/html

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

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

1yarn add -D @minify-html/node

1pnpm add -D @minify-html/node

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

webpack.config.js

1const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
2const CopyPlugin = require("copy-webpack-plugin");
3
4module.exports = {
5  module: {
6    rules: [
7      {
8        test: /\.html$/i,
9        type: "asset/resource",
10      },
11    ],
12  },
13  plugins: [
14    new CopyPlugin({
15      patterns: [
16        {
17          context: path.resolve(__dirname, "dist"),
18          from: "./src/*.html",
19        },
20      ],
21    }),
22  ],
23  optimization: {
24    minimize: true,
25    minimizer: [
26      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
27      // `...`
28
29      // For `html-minifier-terser`:
30      //
31      new HtmlMinimizerPlugin(),
32
33      // For `@swc/html`:
34      //
35      // HTML documents - HTML documents with `Doctype` and `<html>/`<head>`/`<body>` tags
36      //
37      // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L5
38      //
39      // new HtmlMinimizerPlugin({
40      //   minify: HtmlMinimizerPlugin.swcMinify,
41      //   minimizerOptions: {}
42      // })
43      //
44      //
45      // HTML fragments - HTML fragments, i.e. HTML files without doctype or used in `<template>` tags or HTML parts which injects into another HTML parts
46      //
47      // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L38
48      //
49      // new HtmlMinimizerPlugin({
50      //   minify: HtmlMinimizerPlugin.swcMinifyFragment,
51      //   minimizerOptions: {}
52      // })
53    ],
54  },
55};

This will enable HTML optimization only in production mode. If you want to run it also in development set the optimization.minimize option to true.

And run webpack via your preferred method.

[!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

Options

test
include
exclude
parallel
minify
minimizerOptions

`test`

Type:

1type test = string | RegExp | Array<string | RegExp>;

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

Test to match files against.

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        test: /\.foo\.html/i,
7      }),
8    ],
9  },
10};

`include`

Type:

1type include = string | RegExp | Array<string | RegExp>;

Default: undefined

Files to include.

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        include: /\/includes/,
7      }),
8    ],
9  },
10};

`exclude`

Type:

1type exclude = string | RegExp | Array<string | RegExp>;

Default: undefined

Files to exclude.

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        exclude: /\/excludes/,
7      }),
8    ],
9  },
10};

`parallel`

Type:

1type parallel = undefined | boolean | number;

Default: true

Use multi-process parallel running to improve the build speed. Default number of concurrent runs: os.cpus().length - 1.

[!NOTE]

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

`boolean`

Enable/disable multi-process parallel running.

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        parallel: true,
7      }),
8    ],
9  },
10};

`number`

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

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        parallel: 4,
7      }),
8    ],
9  },
10};

`minify`

Type:

1type minify =
2  | ((
3      data: { [file: string]: string },
4      minimizerOptions: {
5        [key: string]: any;
6      },
7    ) => {
8      code: string;
9      errors?: unknown[] | undefined;
10      warnings?: unknown[] | undefined;
11    })
12  | ((
13      data: { [file: string]: string },
14      minimizerOptions: {
15        [key: string]: any;
16      },
17    ) => {
18      code: string;
19      errors?: unknown[] | undefined;
20      warnings?: unknown[] | undefined;
21    })[];

Default: HtmlMinimizerPlugin.htmlMinifierTerser

Allows you to override default minify function. By default, plugin uses html-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 between swcMinify and swcMinifyFragment 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 use require inside minify function when parallel option enabled.

`function`

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        minimizerOptions: {
7          collapseWhitespace: true,
8        },
9        minify: (data, minimizerOptions) => {
10          const htmlMinifier = require("html-minifier-terser");
11          const [[filename, input]] = Object.entries(data);
12
13          return {
14            code: htmlMinifier.minify(input, minimizerOptions),
15            warnings: [],
16            errors: [],
17          };
18        },
19      }),
20    ],
21  },
22};

`array`

If an array of functions is passed to the minify option, the minimizerOptions can be an array or an object. If minimizerOptions is array, the function index in the minify array corresponds to the options object with the same index in the minimizerOptions array. If you use minimizerOptions like object, all minify function accept it.

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        minimizerOptions: [
7          // Options for the first function (HtmlMinimizerPlugin.htmlMinifierTerser)
8          {
9            collapseWhitespace: true,
10          },
11          // Options for the second function
12          {},
13        ],
14        minify: [
15          HtmlMinimizerPlugin.htmlMinifierTerser,
16          (data, minimizerOptions) => {
17            const [[filename, input]] = Object.entries(data);
18            // To do something
19            return {
20              code: `optimised code`,
21              warnings: [],
22              errors: [],
23            };
24          },
25        ],
26      }),
27    ],
28  },
29};

`minimizerOptions`

Type:

1type minimizerOptions =
2  | {
3      [key: string]: any;
4    }
5  | Array<{
6      [key: string]: any;
7    }>;

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

Html-minifier-terser optimizations options.

`object`

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        minimizerOptions: {
7          collapseWhitespace: false,
8        },
9      }),
10    ],
11  },
12};

`array`

The function index in the minify array corresponds to the options object with the same index in the minimizerOptions array. If you use minimizerOptions like object, all minify function accept it.

webpack.config.js

1module.exports = {
2  optimization: {
3    minimize: true,
4    minimizer: [
5      new HtmlMinimizerPlugin({
6        minimizerOptions: [
7          // Options for the first function (HtmlMinimizerPlugin.htmlMinifierTerser)
8          {
9            collapseWhitespace: true,
10          },
11          // Options for the second function
12          {},
13        ],
14        minify: [
15          HtmlMinimizerPlugin.htmlMinifierTerser,
16          (data, minimizerOptions) => {
17            const [[filename, input]] = Object.entries(data);
18            // To do something
19            return {
20              code: `optimised code`,
21              warnings: [],
22              errors: [],
23            };
24          },
25        ],
26      }),
27    ],
28  },
29};

Examples

`swc/html`

Available options.

HTML Documents:

1const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
2const CopyPlugin = require("copy-webpack-plugin");
3
4module.exports = {
5  module: {
6    rules: [
7      {
8        test: /\.html$/i,
9        type: "asset/resource",
10      },
11    ],
12  },
13  plugins: [
14    new CopyPlugin({
15      patterns: [
16        {
17          context: path.resolve(__dirname, "dist"),
18          from: "./src/*.html",
19        },
20      ],
21    }),
22  ],
23  optimization: {
24    minimize: true,
25    minimizer: [
26      new HtmlMinimizerPlugin({
27        minify: HtmlMinimizerPlugin.swcMinify,
28        minimizerOptions: {
29          // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L5
30        },
31      }),
32    ],
33  },
34};

HTML Fragments:

1const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
2const CopyPlugin = require("copy-webpack-plugin");
3
4module.exports = {
5  module: {
6    rules: [
7      {
8        test: /\.html$/i,
9        type: "asset/resource",
10      },
11    ],
12  },
13  plugins: [
14    new CopyPlugin({
15      patterns: [
16        {
17          context: path.resolve(__dirname, "dist"),
18          from: "./src/*.html",
19        },
20      ],
21    }),
22  ],
23  optimization: {
24    minimize: true,
25    minimizer: [
26      new HtmlMinimizerPlugin({
27        test: /\.template\.html$/i,
28        minify: HtmlMinimizerPlugin.swcMinifyFragment,
29        minimizerOptions: {
30          // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L38
31        },
32      }),
33    ],
34  },
35};

`@minify-html/node`

Available options.

HTML Documents:

1const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
2const CopyPlugin = require("copy-webpack-plugin");
3
4module.exports = {
5  module: {
6    rules: [
7      {
8        test: /\.html$/i,
9        type: "asset/resource",
10      },
11    ],
12  },
13  plugins: [
14    new CopyPlugin({
15      patterns: [
16        {
17          context: path.resolve(__dirname, "dist"),
18          from: "./src/*.html",
19        },
20      ],
21    }),
22  ],
23  optimization: {
24    minimize: true,
25    minimizer: [
26      new HtmlMinimizerPlugin({
27        minify: HtmlMinimizerPlugin.minifyHtmlNode,
28        minimizerOptions: {
29          // Options - https://github.com/wilsonzlin/minify-html#minification
30        },
31      }),
32    ],
33  },
34};

You can use multiple HtmlMinimizerPlugin plugins to compress different files with the different minify function.

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

License

Determines if the project has defined a license.

9

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

7

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

2

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 2

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/dependency-review.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/dependency-review.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/nodejs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/nodejs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:84: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/nodejs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:87: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/nodejs.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/nodejs.yml:103: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/html-minimizer-webpack-plugin/nodejs.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/nodejs.yml:94
Warn: npmCommand not pinned by hash: .github/workflows/nodejs.yml:98
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 1 out of 3 npmCommand dependencies pinned

1

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

5.7

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to html-minimizer-webpack-plugin

html-minimizer-webpack-plugin

Installations

Pull Requests

0

144

7

137

Issues

0

0

0

Releases

Developer

webpack-contrib

Developer Guide

CommonJS

>= 18.12.0

Yes

18.19.0

10.2.3

Statistics

Languages

Total Downloads

1,064,612

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

html-minimizer-webpack-plugin

Getting Started

Options

test

include

exclude

parallel

boolean

number

minify

function

array

minimizerOptions

object

array

Examples

swc/html

@minify-html/node

Contributing

License

10

10

10

10

9

7

2

1

0

0

0

0

5.7

/10

Other packages similar to html-minimizer-webpack-plugin

`test`

`include`

`exclude`

`parallel`

`boolean`

`number`

`minify`

`function`

`array`

`minimizerOptions`

`object`

`array`

`swc/html`

`@minify-html/node`