HTML压缩本质是删除不影响渲染的空白与注释，核心是保持DOM树一致，需保留pre/textarea等标签内空白；推荐用html-minifier-terser，禁用collapseBooleanAttributes和removeEmptyAttributes，服务端压缩须防响应流破坏。
HTML 压缩的本质是删掉「不影响渲染」的空白与注释
HTML 压缩不是“加密”或“混淆”，它只是移除浏览器解析时可忽略的字符：换行、制表符、多空格、HTML 注释（），以及部分标签间的冗余空白。只要不破坏嵌套结构和属性语法，压缩后页面表现完全一致。
关键判断标准：压缩后的 HTML 必须仍能被浏览器正确解析为相同的 DOM 树。所以 Hello Hello a b
标签语义就是保留空白。
线上构建阶段用 html-minifier-terser 最稳
Node.js 生态中最成熟、配置粒度最细的工具是 html-minifier-terser（原 html-minifier 的维护分支）。它默认保守，不会误删关键空白，且支持现代 HTML5 语法（如自闭合 SVG 标签、 内容）。
立即学习“前端免费学习笔记（深入）”；
安装与基础使用：
npm install --save-dev html-minifier-terser
常见安全压缩配置（推荐存为 minify-html.js）：
const minify = require('html-minifier-terser').minify;
const result = minify(htmlString, {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
keepClosingSlash: false, // 对 @@##@@ 等自闭合标签，设为 false 会转成 @@##@@（HTML5 兼容）
minifyCSS: true,
minifyJS: true,
// 注意：不要开 collapseBooleanAttributes，它会把 disabled="disabled" → disabled，虽合法但可能干扰某些 JS 检查逻辑
});
-
collapseWhitespace是核心，但它默认不碰、、内容，很安全 - 避免启用
removeEmptyAttributes：会删掉alt=""或value=""，影响可访问性或表单初始值 - 若用 Webpack，推荐搭配
html-webpack-plugin的minify选项，而非单独跑脚本
服务端动态压缩要防「破坏响应流」
Node.js（如 Express）或 PHP 中对 HTML 做实时压缩，容易出问题：比如在 res.write() 分块输出时直接压缩整段，会切碎标签；或压缩后未重置 Content-Length 导致浏览器等待超时。
更稳妥的做法是只压缩最终完整响应体，并确保：
- 仅对
Content-Type: text/html响应生效（加 MIME 类型判断） - 跳过已含
gzip或br编码的请求（避免双重压缩） - 压缩前检查响应状态码，
404、500页面也应压缩，但重定向（301/302）响应体为空，无需处理 - 别用正则替换 HTML —— 比如
/>\s+合并标签，会误杀里的字符串
手写 HTML 时就该规避可压缩项
与其依赖后期压缩，不如写的时候就减少冗余。这些习惯能省去 30%+ 的压缩量，且无风险：
- 属性值统一用双引号，避免混用导致压缩器误判（
class='a'和id="b"并存时，某些简易压缩器会保留单引号但删双引号，造成不一致） - 删掉无意义的
type="text/css"（）、type="text/javascript"（），HTML5 中它们是默认值 - 不用
—— IE 已淘汰，该标签只增体积 - 模板中避免写
），额外 div 就是纯噪音
压缩不是补救措施，而是对 HTML 语义和结构认知的自然结果。真正难的从来不是删空格，而是判断哪段空白「必须保留」——比如 中的空格一旦被压掉，文案就变成“删除3项”，语义断裂。
