html-minifier 直接压缩超长展示页易致白屏或交互失灵，因其默认将模板语法（如{{}}）视为非法html而报错或删除；须启用ignorecustomfragments并配合适配正则，慎用collapsewhitespace、禁用removeemptyattributes，关闭minifyjs，并校验dom完整性。
直接压缩超长展示页的 HTML，不加容错处理，大概率导致页面白屏或交互失灵——因为这类页面往往混有模板语法、动态占位符、服务端注入片段，而 html-minifier 默认会把它们当无效 HTML 处理并破坏结构。
html-minifier 遇到 {{ }} 或 会直接报错或删掉内容
html-minifier 默认按标准 HTML 解析器行为工作，遇到未闭合标签、非法属性或非 HTML 语法（如 {{ title }}、<?php echo $content; ?>）时，要么抛出 Parse Error，要么静默截断/删除整段。这不是 bug，是设计使然。
实操建议：
- 必须启用
ignoreCustomFragments，并显式传入正则数组，例如：ignoreCustomFragments: [/{{[^}]*}}/, //] - 若用 Nunjucks/Liquid 模板，注意其双大括号可能嵌套（如
{{ item.name | upper }}），正则需支持非贪婪匹配和换行 - 避免把
ignoreCustomFragments设为空数组或[/./]—— 这会导致所有标签被跳过，输出空字符串 - 测试时用一个含 3–5 个模板变量的最小 HTML 片段跑通再扩量，别一上来就压全站
collapseWhitespace + conservativeCollapse 组合才是长页安全线
超长展示页常含大量文案段落、预格式化文本（<pre class="brush:php;toolbar:false;"></pre>）、代码块或富文本编辑器输出，盲目开启 collapseWhitespace: true 会把段首缩进、多空格分隔的表格模拟、甚至 ASCII 图都抹平。
实操建议：
- 始终搭配
conservativeCollapse: true：它只合并「不影响渲染」的空白，比如<p> hello </p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>→<p>hello</p>，但保留<pre class="brush:php;toolbar:false;"> code</pre>内原始空格 - 对已知含
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<code>的页面，额外加preserveLineBreaks: true，防止换行丢失 - 禁用
removeEmptyAttributes—— 长页中常见data-*=""或aria-*=""占位属性，删掉可能触发 JS 逻辑异常
内联脚本压缩（minifyJS）在长页中极易引发执行时错误
超长展示页常带初始化逻辑、滚动监听、懒加载控制器等内联 <script></script>，minifyJS: true 会把它们交给 UglifyJS/Terser 压缩。但这些脚本往往没经过 ESLint 或类型检查，存在隐式全局变量、with 语句、eval 字符串拼接等 terser 不兼容写法。
实操建议：
- 默认关闭
minifyJS，仅对明确标记为type="module"或经构建工具处理过的内联脚本启用 - 若必须压缩，先用
terser --parse --compress --mangle单独验证该段脚本，确认无Unexpected token或Invalid assignment - 避免在
<script></script>中写注释（如// init slider），minifyJS可能误判为语法的一部分而破坏逻辑 - 长页中更推荐把 JS 提取为外部文件，用
defer加载 —— 压缩可控，调试可 sourcemap，执行不阻塞 HTML 解析
压缩后必须校验 DOM 结构完整性，不能只看体积下降
体积减少 25% 很诱人，但若 <picture></picture> 被误删 <source></source>、data-srcset 被转成 srcset 导致图片加载失败、或 aria-hidden="true" 被简化为 aria-hidden（部分旧读屏器不识别），用户实际体验反而更差。
关键点在于：html-minifier 的“安全压缩”边界很窄，长页中那些看似无害的优化（如 removeRedundantAttributes、removeAttributeQuotes）在复杂上下文中极易越界。上线前至少做三件事：
- 用
diff工具对比压缩前后 HTML，重点扫<picture></picture>、<iframe></iframe>、data-属性、aria-属性是否被意外修改 - 在真实设备上打开压缩后页面，用 DevTools 的 Accessibility 面板检查关键区域是否仍可读取
- 运行一段轻量级 DOM 校验脚本，例如检查
document.querySelectorAll('picture source').length是否与原始一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
