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

允許您覆寫預設的壓縮函式。預設情況下，外掛程式使用 html-minifier-terser 套件。

我們目前支援

HtmlMinimizerPlugin.swcMinify（用於壓縮 HTML 文件，例如具有 HTML 文件類型和 <html>/<body>/<head> 標籤）
HtmlMinimizerPlugin.swcMinifyFragment（用於壓縮 HTML 片段，例如當您有部分 HTML 將插入到其他 HTML 部分時）
HtmlMinimizerPlugin.htmlMinifierTerser
HtmlMinimizerPlugin.minifyHtmlNode

注意
swcMinify 和 swcMinifyFragment 之間的差異是錯誤回報。如果您的 HTML 文件或片段中有錯誤（無效或語法錯誤），您將會收到錯誤。這允許您在建置階段看到所有錯誤和問題。

對於使用和測試未發佈的版本或分支很有用。

警告
當啟用 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