HtmlMinimizerWebpackPlugin

免责声明 HtmlMinimizerWebpackPlugin是一个由社区成员维护的第三方包，它可能不具备与 webpack 相同的支持、安全策略或许可证，并且不受 webpack 维护。

此插件可以使用 3 种工具来优化和压缩你的 HTML

swc - 基于 Rust 的 Web 平台，速度非常快。
html-minifier-terser (默认) - 基于 JavaScript 的 HTML 压缩器。
@minify-html/node - 一个精心优化了速度和效率的 Rust HTML 压缩器，并带有其他语言的绑定。

该插件无缝集成到你的 Webpack 构建流程中，以减小 HTML 大小并提高加载性能。

入门

首先，你需要安装 html-minimizer-webpack-plugin

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

或

yarn add -D html-minimizer-webpack-plugin

或

pnpm add -D html-minimizer-webpack-plugin

额外步骤：如果你想使用 @swc/html，你需要安装它

npm install @swc/html --save-dev

或

yarn add -D @swc/html

或

pnpm add -D @swc/html

额外步骤：如果你想使用 @minify-html/node，你需要安装它

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

或

yarn add -D @minify-html/node

或

pnpm add -D @minify-html/node

然后将插件添加到你的 webpack 配置中。例如：

webpack.config.js

const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
const CopyPlugin = require("copy-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: {}
      // })
    ],
  },
};

[!注意]

默认情况下，HTML 只会在生产模式下被压缩。要在开发模式中启用压缩，请显式设置 optimization.minimize: true。

最后，使用你通常使用的方法运行 webpack（例如，通过 CLI 或 npm 脚本）。

[!注意]

工具中删除和折叠空格的方式有所不同（默认情况下）。

@swc/html - 仅在安全的地方删除和折叠空白字符（例如 - 在 html 和 body 元素周围，head 元素内部以及元数据元素之间 - <meta>/script/link/等）。

html-minifier-terser - 总是将多个空白字符折叠成一个空格（从不完全删除），但你可以使用 options 来改变它。

@minify-html/node - 有关详细的空白字符行为，请阅读文档 https://github.com/wilsonzlin/minify-html#whitespace。

选项

test
include
exclude
parallel
minify
minimizerOptions

`test`

类型

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

默认值: /\.html(\?.*)?$/i

用于匹配文件的测试。

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

`include`

类型

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

默认值：undefined

要包含进行压缩的文件。

webpack.config.js

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

`exclude`

类型

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

默认值：undefined

要从压缩中排除的文件。

webpack.config.js

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

`parallel`

类型

type parallel = undefined | boolean | number;

默认值：true

启用多进程并行化以提高构建性能。

如果为 true，则使用 os.cpus().length - 1 或 os.availableParallelism() - 1 (如果可用)。
如果为 number，则设置并发 worker 的数量。

[!注意]

并行化可以显著加快你的构建速度，因此强烈推荐。

`boolean`

启用或禁用多进程并行运行。

webpack.config.js

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

`number`

启用多进程并行运行并设置并发运行的数量。

webpack.config.js

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

`minify`

类型

type minify =
  | ((
      data: { [file: string]: string },
      minimizerOptions: {
        [key: string]: any;
      },
    ) => {
      code: string;
      errors?: unknown[] | undefined;
      warnings?: unknown[] | undefined;
    })
  | ((
      data: { [file: string]: string },
      minimizerOptions: {
        [key: string]: any;
      },
    ) => {
      code: string;
      errors?: unknown[] | undefined;
      warnings?: unknown[] | undefined;
    })[];

默认值: HtmlMinimizerPlugin.htmlMinifierTerser

允许你覆盖默认的压缩函数。默认情况下，插件使用 html-minifier-terser 包。

我们目前支持：

HtmlMinimizerPlugin.swcMinify（用于压缩 HTML 文档，即带有 HTML doctype 和 <html>/<body>/<head> 标签的文档）
HtmlMinimizerPlugin.swcMinifyFragment（用于压缩 HTML 片段，即当你有一部分 HTML 将被插入到其他 HTML 部分时）
HtmlMinimizerPlugin.htmlMinifierTerser
HtmlMinimizerPlugin.minifyHtmlNode

[!注意]

swcMinify 和 swcMinifyFragment 之间的区别在于错误报告。如果你的 HTML 文档或片段中存在错误（无效或损坏的语法），你将收到错误报告。这允许你在构建阶段查看所有错误和问题。

对于使用和测试未发布版本或分支很有用。

[!警告]

当 parallel 选项启用时，始终在 minify 函数内部使用 require.

`function`

你可以定义一个自定义的压缩函数，完全控制 HTML 的处理方式。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new HtmlMinimizerPlugin({
        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`

如果将函数数组传递给 minify 选项，则 minimizerOptions 可以是以下形式：

数组；如果 minimizerOptions 是数组，则 minify 数组中的函数索引对应于 minimizerOptions 数组中具有相同索引的选项对象。
单个对象；如果你使用 minimizerOptions 作为对象，所有 minify 函数都接受它。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new HtmlMinimizerPlugin({
        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 something
            return {
              code: `optimised code`,
              warnings: [],
              errors: [],
            };
          },
        ],
      }),
    ],
  },
};

`minimizerOptions`

类型

type minimizerOptions =
  | {
      [key: string]: any;
    }
  | Array<{
      [key: string]: any;
    }>;

默认值

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

Html-minifier-terser 优化选项。

`object`

将相同的选项应用于默认或自定义的 minify 函数。

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

`array`

minify 数组中的函数索引对应于 minimizerOptions 数组中具有相同索引的选项对象。如果你使用 minimizerOptions 作为对象，所有 minify 函数都接受它。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new HtmlMinimizerPlugin({
        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 something
            return {
              code: `optimised code`,
              warnings: [],
              errors: [],
            };
          },
        ],
      }),
    ],
  },
};

示例

`swc/html`

可用的 options。

HTML 文档

const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
const CopyPlugin = require("copy-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: [
      new HtmlMinimizerPlugin({
        minify: HtmlMinimizerPlugin.swcMinify,
        minimizerOptions: {
          // Options - https://github.com/swc-project/bindings/blob/main/packages/html/index.ts#L5
        },
      }),
    ],
  },
};

HTML 片段

用于部分 HTML 文件（例如在 <template></template> 标签内或 HTML 字符串中）。

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

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: [
      new HtmlMinimizerPlugin({
        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`

可用的 options。

HTML 文档

const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
const CopyPlugin = require("copy-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: [
      new HtmlMinimizerPlugin({
        minify: HtmlMinimizerPlugin.minifyHtmlNode,
        minimizerOptions: {
          // Options - https://github.com/wilsonzlin/minify-html#minification
        },
      }),
    ],
  },
};

你可以使用多个 HtmlMinimizerPlugin 插件来使用不同的 minify 函数压缩不同的文件。

贡献

我们欢迎所有贡献！如果您是新用户，请在提交问题或拉取请求之前花一些时间阅读我们的贡献指南。

贡献

许可证

MIT

编辑此页面·打印此页面·跳转到仓库

« 上一页

EslintWebpackPlugin

ImageMinimizerWebpackPlugin