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