html-minifier 最优配置需按场景定制：collapseWhitespace 与 conservativeCollapse 应同时启用以兼顾压缩与排版安全；removeAttributeQuotes 默认应禁用以防兼容性问题；minifyCSS/minifyJS 开启前须验证语法支持与执行正确性；调试注释可通过 ignoreCustomFragments 选择性保留。
html-minifier 的最优配置不是固定值，而是取决于你的 HTML 结构、运行环境和构建流程。盲目套用“全开压缩”容易引发渲染异常或 JS 执行失败，尤其在动态生成内容或依赖特定空格/注释的场景下。
collapseWhitespace 和 conservativeCollapse 怎么配才安全
collapseWhitespace 默认为 false，设为 true 能显著减小体积，但它会把文本节点间多个空格、换行全压成一个空格——这在 ``、`<code>` 或内联样式含 <code>white-space: pre</code> 的地方会破坏排版。
更稳妥的做法是同时启用 <code>conservativeCollapse: true</code>：它保留至少一个空格，避免相邻内联元素（如 <code><span>foo</span> <span>bar</span></code>）被挤成 <code>foobar</code>。
<p>如果你页面里有大量 Markdown 渲染结果、代码块或富文本输出，建议这样写：</p><pre class="brush:php;toolbar:false;">{ "collapseWhitespace": true, "conservativeCollapse": true, "preserveLineBreaks": false }注意：preserveLineBreaks: true 会禁用换行压缩，但会导致 collapseWhitespace 效果打折，一般不推荐。
removeAttributeQuotes 在哪些情况下会出问题
removeAttributeQuotes 设为 true 后，<div class="header" id="main"> 会变成 <code><div class="header" id="main">。
这看似省字节，但老版本 WebKit（iOS 9 Safari）、某些 XML 解析器或服务端模板引擎（如 Django 模板）可能无法正确解析无引号属性，尤其当属性值含空格、<code>=、/ 或 Unicode 字符时。
常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
- 使用
v-bind:动态绑定 Vue 模板时，无引号属性可能被 Vue 编译器忽略 -
<a href="/path?k=v&x=y"></a>中的&未编码，会被 HTML 解析器截断 - 服务端 SSR 输出含变量插值（如
<div data-id="{{id}}">），引号缺失会导致语法错误<p>除非你确认所有运行环境都支持无引号属性，否则建议保持 <code>removeAttributeQuotes: false。minifyCSS / minifyJS 开启前必须检查什么
minifyCSS和minifyJS默认都是false，开启后会分别调用clean-css和uglify-js处理内联代码。但它们不是“一键安全”：
-
minifyCSS会重写@import、移除无效声明，若内联 CSS 含 CSS 变量（--color）或自定义属性，某些旧版clean-css版本会丢弃它们 -
minifyJS对 ES6+ 语法支持依赖 UglifyJS 版本；若你用了async/await或可选链?.，需确认html-minifier安装的是支持这些语法的分支（如html-minifier-terser） - 内联脚本含
document.write或依赖字符串拼接的 DOM 操作，压缩后可能执行顺序错乱
实操建议：先用
--minify-css --minify-js跑一次，再用浏览器 DevTools 检查样式是否错位、控制台有无Uncaught SyntaxError，最后才写入正式配置。如何保留调试用注释又压缩其他内容
生产环境要删注释，但 CI 构建或 QA 环境常需保留部分注释（如 或 区块）。html-minifier支持ignoreCustomFragments配置项，例如：{ "removeComments": true, "ignoreCustomFragments": [ "<!-- htmlmin:ignore -->[\s\S]*?<!-- htmlmin:endignore -->" ] }这样写就能保留：
<!-- htmlmin:ignore --><div id="debug-info">build: 20260701.1234</div><!-- htmlmin:endignore -->
注意正则中的转义：HTML 实际写的是
<!--，但 JSON 配置里要写成<!--（即<），否则匹配失败。另外，ignoreCustomFragments不支持嵌套，一个区块里不能再套htmlmin:ignore。真正难的不是参数本身，而是判断哪些 HTML 片段“看起来安全，其实一压就崩”。比如 CMS 输出的富文本、第三方 widget 注入的代码、或者用
innerHTML动态拼接的模板——这些地方哪怕只开一个collapseBooleanAttributes，都可能让<input required="required">变成<input required>，进而导致某些表单验证库失效。配完参数，务必在真实设备和目标浏览器上过一遍核心流程。 -
