HTML代码压缩工具汇总

先说几个核心判断：HTML 压缩这件事，工具选对了事半功倍，选错了就是埋坑。目前最稳妥的选择是 html-minifier-terser，老版 html-minifier 已经停止维护了，对于现代 HTML 中常见的 、 以及 ES2020+ 的内联脚本，它的支持相当不稳定，很容易出现误删或者直接报错的情况。

所以，二话不说，认准 html-minifier-terser 就对了。

Node.js 项目该装哪个包

本地开发或者构建流程里需要压缩 HTML，安装 html-minifier-terser 是正解：

• npm install --save-dev html-minifier-terser
• 它基于 Terser 引擎，处理模板字符串、可选链、空值合并这些现代语法非常安全
• 老版 html-minifier 的 minifyJS: true 一遇到 `${x}` 或者 a.b 就会直接抛出 SyntaxError
• 如果项目已经用了 Vite 或 Webpack 5+，插件底层通常默认就桥接了 html-minifier-terser，不用再手动引入

Webpack 中 html-webpack-plugin 怎么配才不翻车

这里有个关键点：不是所有选项都适合一股脑全开，特别是当项目里涉及服务端渲染或者模板语法的时候。

• removeComments: true 会删掉除 外的所有注释。但 EJS 或 Nunjucks 的占位符（如 <%= title %>）不是注释，所以不会被误删——只要别在 ignoreCustomComments 里配错正则就行。
• removeScriptTypeAttributes: true 这个需要特别小心。它会删掉 里的 type，导致模块加载直接失败。所以这个选项只建议针对 type="text/javascript" 生效，或者干脆不开启。
• minifyJS: true 也要谨慎。Webpack 自带的 terser-webpack-plugin 已经做了 JS 压缩，这里再开一层双重压缩，可能把 console.log 里的变量名也给压缩掉，调试起来非常头疼。生产环境建议设为 { compress: false } 或者直接关掉。
• 一个比较安全可靠的配置示例：

  new HtmlWebpackPlugin({  minify: {    collapseWhitespace: true,    removeComments: true,    removeRedundantAttributes: true,    useShortDoctype: true,    removeEmptyAttributes: true,    removeScriptTypeAttributes: false, // 手动控制    minifyJS: { compress: false }  }})

命令行批量压缩时怎么避开 SVG 和自定义标签

CLI 工具默认把 当成普通 HTML 标签处理，这就有问题了——它可能会错误地移除 viewBox 里的空格或者闭合斜杠，导致 SVG 渲染异常。

• 解决方案：加上 --custom-element-prefixes svg（v6+ 支持），让解析器识别 SVG 元素并跳过属性精简。
• 如果 HTML 里用了 Web Components 自定义标签（比如 ），记得加 --custom-element-prefixes my-，否则 removeRedundantAttributes 可能会删掉一些必要的属性。
• 对于包含 $$ 或 的页面，避免使用 --remove-optional-tags。这些标签的闭合规则和普通 HTML 不同，强制移除 会直接破坏结构。
• 测试用命令参考：

  html-minifier --collapse-whitespace --remove-comments --custom-element-prefixes svg,my- input.html -o output.html

说一个容易被忽略的事：HTML 压缩只是传输层优化的第一步。真到线上，一旦开启了 gzip 或者 brotli，removeComments 带来的体积收益可能只剩下 1–2%。但与此同时，误删 data-* 属性或者破坏内联 JSON 结构带来的风险却是实实在在的。上线之前，别只看文件大小，务必用 diff 工具对比压缩前后的 DOM 快照，确认没有任何结构上的变化。