HtmlMinimizerWebpackPlugin

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

此插件可以使用 3 个工具来优化和最小化你的 HTML

swc - 非常快速的基于 Rust 的 Web 平台。
html-minifier-terser（默认） - 基于 JavaScript 的 HTML 缩小器。
@minify-html/node - 一款经过精心优化的 Rust 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>` 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。

注意
在工具中移除和折叠空格的方式不同（默认情况下）。
@swc/html - 仅在安全的地方移除和折叠空格（例如 - 在 html 和 body 元素周围，在 head 元素内部以及元数据元素之间 - <meta>/script/link/等）
html-minifier-terser - 始终将多个空格折叠为 1 个空格（从不完全移除它），但你可以使用 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

使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。

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

`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

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

我们目前支持

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

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

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

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

`function`

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`

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`

可用 选项。

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 片段

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({
        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`

可用 选项。

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