HTML压缩本质是删除不影响渲染的空白与注释，核心是保持DOM树一致，需保留pre/textarea等标签内空白；推荐用html-minifier-terser，禁用collapseBooleanAttributes和removeEmptyAttributes，服务端压缩须防响应流破坏。
HTML 压缩的本质是删掉「不影响渲染」的空白与注释
HTML 压缩不是“加密”或“混淆”，它只是移除浏览器解析时可忽略的字符：换行、制表符、多空格、HTML 注释（<!-- ... -->），以及部分标签间的冗余空白。只要不破坏嵌套结构和属性语法，压缩后页面表现完全一致。
关键判断标准：压缩后的 HTML 必须仍能被浏览器正确解析为相同的 DOM 树。所以 <p> Hello </p> 可安全压成 <p>Hello</p>，但 <pre class="brush:php;toolbar:false;"> a b </pre> 中的空格不能删——<pre class="brush:php;toolbar:false;"></code> 标签语义就是保留空白。</p><H3>线上构建阶段用 html-minifier-terser 最稳</H3><p>Node.js 生态中最成熟、配置粒度最细的工具是 <code>html-minifier-terser</code>（原 <code>html-minifier</code> 的维护分支）。它默认保守，不会误删关键空白，且支持现代 HTML5 语法（如自闭合 SVG 标签、<code><template></code> 内容）。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>安装与基础使用：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11499" title="cn-json-diff"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="cn-json-diff" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11499" title="cn-json-diff">cn-json-diff</a>
<p>比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。</p>
</div>
<a href="/xiazai/skill11499" title="cn-json-diff" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><pre class="brush:php;toolbar:false;">npm install --save-dev html-minifier-terser</pre><p>常见安全压缩配置（推荐存为 <code>minify-html.js）：
const minify = require('html-minifier-terser').minify;
<p>const result = minify(htmlString, {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
keepClosingSlash: false, // 对 <code><img / alt="HTML5如何压缩HTML代码_HTML5代码精简方法【攻略】" ></code> 等自闭合标签，设为 false 会转成 <code><img alt="HTML5如何压缩HTML代码_HTML5代码精简方法【攻略】" ></code>（HTML5 兼容）
minifyCSS: true,
minifyJS: true,
// 注意：不要开 <code>collapseBooleanAttributes</code>，它会把 <code>disabled="disabled"</code> → <code>disabled</code>，虽合法但可能干扰某些 JS 检查逻辑
});
-
collapseWhitespace是核心，但它默认不碰<textarea></textarea>、<pre class="brush:php;toolbar:false;"></pre>、<code>内容，很安全 - 避免启用
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+合并标签，会误杀<script>console.log('><');</script>里的字符串
手写 HTML 时就该规避可压缩项
与其依赖后期压缩，不如写的时候就减少冗余。这些习惯能省去 30%+ 的压缩量，且无风险：
- 属性值统一用双引号，避免混用导致压缩器误判（
class='a'和id="b"并存时，某些简易压缩器会保留单引号但删双引号，造成不一致） - 删掉无意义的
type="text/css"（<style></style>）、type="text/javascript"（<script></script>），HTML5 中它们是默认值 - 不用
<meta http-equiv="X-UA-Compatible" content="IE=edge">—— IE 已淘汰，该标签只增体积 - 模板中避免写
<div>{{content}}</div>这类“包裹即正义”结构，内容本身已带语义时（如<h1></h1>），额外 div 就是纯噪音
压缩不是补救措施，而是对 HTML 语义和结构认知的自然结果。真正难的从来不是删空格，而是判断哪段空白「必须保留」——比如 <button>删除 <span class="count">3</span> 项</button> 中的空格一旦被压掉，文案就变成“删除3项”，语义断裂。
