<p>HTML压缩不能无差别删除注释和空白，因<pre>、<textarea>等内容需保留换行，条件注释（如<!--[if IE]-->）、构建占位符（如<!-- html-webpack-plugin -->）及data-属性含空格时去引号会破坏解析，盲目启用removeComments或collapseWhitespace可能导致功能失效或JS错误。</p>
为什么不能无差别删除 HTML 注释和空白
HTML 压缩不是删得越狠越好。浏览器解析时会忽略大部分空白和注释，但有些内容是运行时逻辑依赖的——比如 <!--[if IE]> 条件注释、构建工具插入的 <!-- html-webpack-plugin --> 占位符、或服务端模板引擎识别的 <!--#include-->。盲目启用 removeComments:true 会导致功能失效。
-
<pre>、<textarea>、<script>、<style>内部的换行与空格必须保留，否则破坏语义或语法 -
data-属性值含空格或特殊字符时（如data-id="123 abc"），去掉引号会触发解析错误 - 内联
<script>中若含模板字符串或正则字面量（/\s+/g），压缩时误删换行可能让 JS 报错
html-minifier 中哪些配置项直接影响结构标识符安全
关键不在“开不开”，而在“怎么开”。html-minifier-terser 的默认配置已较保守，但生产环境仍需显式加固：
- 禁用
collapseBooleanAttributes：避免把<input required="required">压成<input required>——某些旧版 SSR 框架依赖带值写法 - 禁用
removeEmptyAttributes：防止<div class="">被删成<div>，破坏 CSS 选择器匹配 - 启用
preserveLineBreaks:false（默认）但配合conservativeCollapse:true：只合并标签间冗余空白，不碰文本节点内的换行 - 用
ignoreCustomFragments显式声明模板语法边界，例如[/<%[\s\S]*?%>/]防止误删 JSP/PHP 插值
如何验证压缩后结构标识符未被破坏
不能只看文件体积变小了就认为成功。真正要检查的是 DOM 构建结果是否一致：
- 用
new DOMParser().parseFromString(html, 'text/html')加载压缩前后 HTML，对比document.body.innerHTML是否相同（注意：仅适用于静态 HTML） - 对含
data-属性的元素，检查el.hasAttribute('data-xxx')和el.getAttribute('data-xxx')返回值是否与原始一致 - 运行时动态注入的注释（如 Webpack 的
<!-- inject:css -->）需在构建后立即验证其存在性，而非依赖压缩工具配置
服务端实时压缩时最易忽略的陷阱
构建时压缩可控，但 Node.js 或 Java 中做响应流压缩时，容易因缓冲区切割破坏结构：
立即学习“前端免费学习笔记（深入）”；
- 不要对 chunked 响应流做逐块正则替换——可能把
<pre>标签切在两段之间，导致后续压缩逻辑失效 - 若使用
express+html-minifier-terser中间件，务必设置res.set('Content-Encoding', 'identity')并交由 Nginx/Apache 处理 gzip，避免双重压缩损坏流 - 模板引擎输出前已含转义字符（如
minifyCSS或minifyJS，可能误将实体当作普通文本处理
真正危险的不是压缩本身，而是把“删空白”当成无状态操作。只要涉及 <pre>、data-、条件注释、模板占位符，就必须在配置里划出明确边界——否则节省的几 KB 可能换来一个白屏或 JS 错误。
