html-minifier是最可靠可配置的html空格处理方案，按浏览器解析逻辑折叠冗余空白，保留pre/textarea/script/style内语义性空白，通过collapsewhitespace等选项精细控制压缩行为。
html-minifier 是目前最可靠、可配置性最强的 HTML 空格处理方案，它不暴力删空格，而是按浏览器解析逻辑折叠冗余空白——普通标签间换行缩进可安全移除，pre、textarea、script、style 内容默认保留，不会破坏语义或语法。
用 collapseWhitespace 安全压缩标签间空白
这个选项是核心开关，但行为比字面意思更精细：
- 它把块级元素之间的连续空白（换行 + 缩进）压缩为单个空格，或直接删除——取决于上下文是否影响渲染
-
<div>\n <p>Hello</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>\n</div>→<div><p>Hello</p></div>，但<p>Hello World</p>中的空格仍保留 - 若页面含大量
inline-block元素，需设conservativeCollapse: false，否则换行仍会渲染为可见间隙 - 它完全不碰属性值内的空白，例如
class=" header main "不会被简化
手动遍历 DOM 清理文本节点时别漏掉 nodeType === 3
想在运行时动态清理某容器内所有后代的冗余空白，必须遍历 childNodes，而非 children：
-
children只返回元素节点，会跳过换行缩进生成的纯文本节点（nodeType === 3） - 正确做法：对每个
TEXT_NODE调用textContent.trim().replace(/\s+/g, ' ')，\s比 - 加一层
/\S/.test(text)判断，跳过纯空白节点（如<div>\n\t</div>中的换行缩进），避免误删有效内容 - 切勿对未挂载的元素调用
normalize()，它只合并相邻文本节点或清除空节点，不处理内部空格
服务端或构建阶段用 html-minifier 配置要避开这些坑
本地开发或 CI 流程中集成时，常见失效原因不是配置错，而是忽略上下文约束：
- 默认已跳过
pre、textarea、script、style，但若自定义了ignoreCustomFragments正则，可能误伤<script></script>内部的>\n结构，导致 JS 语法错误 - 正则替换如
re.sub(r'>\s+ 在 Python 中看似简单，但会破坏 <code><script>console.log('>');</script>这类合法内容 - gzip 已能压缩重复空白，过度压缩收益有限；重点应放在保证
inline-block间隙、white-space: pre-wrap区域等视觉敏感区不受影响
真正难的不是“怎么删空格”，而是判断哪段空白该留、哪段该折、哪段绝对不能动——pre 里的换行、textarea 的初始缩进、script 中模板字符串的换行，都属于语义性空白，自动化工具若无差别处理，上线后就容易出数据或渲染异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
