Webpack 项目，JS、CSS、HTML 文件类型压缩代码工具推荐使用 TerserWebpackPlugin 压缩

使用 TerserWebpackPlugin 压缩 JS

Terser 是当下最为流行的 ES6 代码压缩工具之一，支持 Dead-Code Eliminate、删除注释、删除空格、代码合并、变量名简化等等一系列代码压缩功能。Terser 的前身是大名鼎鼎的 UglifyJS，它在 UglifyJS 基础上增加了 ES6 语法支持，并重构代码解析、压缩算法，使得执行效率与压缩率都有较大提升。

Webpack5.0 后默认使用 Terser 作为 JavaScript 代码压缩器，简单用法只需通过 optimization.minimize 配置项开启压缩功能即可：

module.exports = {
  //...
  optimization: {
    minimize: true
  }
};

提示：使用 mode = 'production' 启动生产模式构建时，默认也会开启 Terser 压缩。

Terser 支持许多压缩配置：

dead_code：是否删除不可触达的代码 —— 也就是所谓的死代码；
booleans_as_integers：是否将 Boolean 值字面量转换为 0、1；
join_vars：是否合并连续的变量声明，如 var a = 1; var b = 2; 合并为 var a=1,b=2;；
等等。

多数情况下使用默认 Terser 配置即可，必要时也可以手动创建 terser-webpack-plugin 实例并传入压缩配置实现更精细的压缩功能，例如：

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            reduce_vars: true,
            pure_funcs: ["console.log"],
          },
          // ...
        },
      }),
    ],
  },
};

使用 CssMinimizerWebpackPlugin 压缩 CSS

Webpack 社区中有不少实现 CSS 代码压缩的插件，例如：css-minimizer-webpack-plugin，用法：

安装依赖：

yarn add -D css-minimizer-webpack-plugin

2. 修改 Webpack 配置：

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.css$/,
        // 注意，这里用的是 `MiniCssExtractPlugin.loader` 而不是 `style-loader`
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      // Webpack5 之后，约定使用 `'...'` 字面量保留默认 `minimizer` 配置
      "...",
      new CssMinimizerPlugin(),
    ],
  },
  // 需要使用 `mini-css-extract-plugin` 将 CSS 代码抽取为单独文件
  // 才能命中 `css-minimizer-webpack-plugin` 默认的 `test` 规则
  plugins: [new MiniCssExtractPlugin()],
};

这里的配置逻辑，一是使用 mini-css-extract-plugin 将 CSS 代码抽取为单独的 CSS 产物文件，这样才能命中 css-minimizer-webpack-plugin 默认的 test 逻辑；二是使用 css-minimizer-webpack-plugin 压缩 CSS 代码。

使用 HtmlMinifierTerser 压缩 HTML

html-minifier-terser 是一个基于 JavaScript 实现的、高度可配置的 HTML 压缩器，支持一系列压缩特性如：

collapseWhitespace：删除节点间的空字符串，如：

<!-- 原始代码： -->
<div> <p>    foo </p>    </div>
<!-- 经过压缩的代码： -->
<div><p>foo</p></div>

removeComments：删除备注，如：

<!-- 原始代码： -->
<!-- some comment --><p>blah</p>

<!-- 经过压缩的代码： -->
<p>blah</p>

collapseBooleanAttributes：删除 HTML 的 Boolean 属性值，如：

<!-- 原始代码： -->
<input value="foo" readonly="readonly">

<!-- 经过压缩的代码： -->
<input value="foo" readonly>

等等。

我们可以借助 html-minimizer-webpack-plugin 插件接入 html-minifier-terser 压缩器，步骤：

安装依赖：

yarn add -D html-minimizer-webpack-plugin

2. 修改 Webpack 配置，如：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      // Webpack5 之后，约定使用 `'...'` 字面量保留默认 `minimizer` 配置
      "...",
      new HtmlMinimizerPlugin({
        minimizerOptions: {
          // 折叠 Boolean 型属性
          collapseBooleanAttributes: true,
          // 使用精简 `doctype` 定义
          useShortDoctype: true,
          // ...
        },
      }),
    ],
  },
  plugins: [
    // 简单起见，这里我们使用 `html-webpack-plugin` 自动生成 HTML 演示文件
    new HtmlWebpackPlugin({
      templateContent: `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>webpack App</title>
      </head>
      <body>
        <input readonly="readonly"/>
        <!-- comments -->
        <script src="index_bundle.js"></script>
      </body>
    </html>`,
    }),
  ],
};

这段配置的关键逻辑，一是通过 html-webpack-plugin 生成 HTML 文件，这里为了演示方便特意在 HTML 模板 templateContent 中插入一些可以被压缩的代码；二是通过 html-minimizer-plugin 压缩 HTML 代码，效果：

上图中左边是正常构建结果，右图是经过 html-minimizer-plugin 压缩后的构建结果，可以看到如 doctype 标签被删掉若干不重要的声明，文档中的备注也被删除，等等。