TL;DR#

1
html-minifier-terser --input-dir . --output-dir ./dist --file-ext html --collapse-whitespace --remove-comments --remove-redundant-attributes --minify-css true --minify-js true

这个命令批量压缩当前目录下所有 HTML 文件（去空白、去注释、去冗余属性、压缩内联 CSS/JS），输出到 ./dist 目录。

为什么要压缩 HTML#

HTML 文件在开发阶段通常包含大量空白、注释、冗余属性,这些内容对浏览器解析没有意义,却会增加文件体积和传输时间。对于静态站点或需要频繁加载的页面,压缩 HTML 是最低成本的性能优化手段之一。

压缩与混淆的区别#

先厘清一个概念:压缩(minify)和混淆(obfuscate)是两回事。压缩是去除空白、注释、冗余属性等不影响语义的内容,减小文件体积;混淆则是让代码难以阅读或逆向,通常针对内联的 JS/CSS。HTML 结构本身很难做实质性混淆,如果目标只是减小体积,压缩就足够了。

主流工具#

• html-minifier-terser 的维护延续版本,功能最全,是目前最广泛使用的压缩工具
• htmlnano:基于 posthtml 的插件化压缩工具,可配合 cssnano、terser 处理内联资源
• 构建工具内置 / Webpack 的 html-webpack-plugin 自带 minify 选项,底层同样调用 html-minifier-terser

安装#

全局安装(推荐,免去每次 npx 前缀):

1
pnpm add -g html-minifier-terser

如果提示 global bin 目录未加入 PATH:

1
pnpm setup
2
source ~/.zshrc

若 pnpm setup 执行过程中因内部 store 错误导致 bin 创建失败,可以手动补上 PATH:

1
mkdir -p ~/.local/share/pnpm
2
export PNPM_HOME="$HOME/.local/share/pnpm"
3
export PATH="$PNPM_HOME:$PATH"
4
source ~/.zshrc

使用方式#

1
html-minifier-terser index.html -o index.min.html --collapse-whitespace --remove-comments --minify-css true --minify-js true

1
html-minifier-terser --input-dir . --output-dir ./dist --file-ext html --collapse-whitespace --remove-comments --remove-redundant-attributes --minify-css true --minify-js true

1
const { minify } = require("html-minifier-terser");
2
const fs = require("fs");
3

4
const html = fs.readFileSync("index.html", "utf8");
5

6
minify(html, {
7
  collapseWhitespace: true,
8
  removeComments: true,
9
  removeRedundantAttributes: true,
10
  minifyCSS: true,
11
  minifyJS: true,
12
}).then((result) => {
13
  fs.writeFileSync("index.min.html", result);
14
});

常用参数说明#

安全边界#

如果目标是”绝不破坏现有功能”,应避免以下激进选项:

• --remove-attribute-quotes:部分解析器对无引号属性值的兼容性存在差异
• --collapse-boolean-attributes:可能影响某些依赖显式属性值的脚本逻辑
• --remove-optional-tags:删除可选闭合标签,存在被非标准解析器误解析的风险

保守但足够有效的参数组合是:collapse-whitespace + remove-comments + remove-redundant-attributes + minify-css + minify-js,这些选项只处理语义无关的冗余内容,不会改变页面行为。