HtmlMinimizerWebpackPlugin

免責事項 HtmlMinimizerWebpackPluginはコミュニティメンバーによってメンテナンスされているサードパーティ製パッケージであり、webpackと同じサポート、セキュリティポリシー、またはライセンスを持っている可能性はなく、webpackによってメンテナンスされていません。

このプラグインは、HTMLを最適化および最小化するために3つのツールを使用できます

swc - Web用の非常に高速なRustベースのプラットフォーム。
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 doctypeと <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 の最適化 options。

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

利用可能な 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フラグメント

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`

利用可能な 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