正则粗暴替换/\s+/g会破坏<pre>、<textarea>和内联<script>/<style>中的语义空白，而html-minifier通过AST解析实现上下文感知压缩，安全跳过敏感区域，是Node.js生态中兼顾正确性与可控性的唯一可靠方案。
直接上结论：用正则粗暴替换 /\s+/g 会破坏 <pre>、<textarea> 和内联 <script>/<style> 中的空白语义，不可靠；真正安全的压缩必须区分上下文，而 html-minifier 是目前 Node.js 生态里唯一兼顾正确性与可控性的选择。
为什么不能简单 replace(/\s+/g, ' ')？
浏览器对空白的“折叠”只发生在文本节点渲染阶段，且仅限普通内容区域。但 html-minifier 压缩的是源码字符串，不是 DOM；它必须模拟解析器行为，否则会出错。
-
<pre> a\n b</pre>→ 替换后变成<pre> a b</pre>，视觉效果被毁 -
<script>console.log( "hello" );</script>→ 压缩后可能变成console.log("hello");（看似 OK），但若含模板字符串或 JSX，/\s+/g会误删换行导致语法错误 -
<textarea>\n content\n</textarea>→ 换行是用户输入的一部分，不能动
html-minifier 的 collapseWhitespace 实际行为
它不是简单删空格，而是基于 HTML 解析上下文做条件处理：
- 在普通元素内（如
<div>、<p>）：合并连续空白为单空格，保留首尾换行（除非配preserveLineBreaks: false） - 在
<pre>、<textarea>、<script>、<style>内：完全跳过空白处理 - 标签之间（
>\n<）：默认合并为><，但可通过conservativeCollapse: true保留至少一个空格防连字问题
示例配置：
立即学习“前端免费学习笔记（深入）”；
const minify = require('html-minifier').minify;
const html = `<div>\n <p>hello</p>\n</div>\n<pre> code\n block</pre>`;
const result = minify(html, {
collapseWhitespace: true,
removeComments: true,
// 不加 preserveLineBreaks，<div> 内换行会被折叠，但 <pre> 内不变
});如何在 EJS 渲染流程中嵌入压缩
别试图在模板里写过滤器去压缩整个输出——EJS 不提供 DOM 上下文感知能力，<%- %> 输出前无法判断当前是否在 <pre> 内。正确做法是渲染完再压缩：
- 用
res.render()渲染时传{ cache: false }避免缓存未压缩版本 - 在 Express 中间件里拦截
res.send()，但注意：仅适用于纯 HTML 响应，JSON 或流式响应会被破坏 - 更稳妥的方式是单独导出 HTML 文件再压缩，比如构建脚本中调用：
const ejs = require('ejs');
const fs = require('fs');
const minify = require('html-minifier').minify;
<p>ejs.renderFile('template.ejs', { data: 'xxx' }, (err, html) => {
if (err) throw err;
const compressed = minify(html, {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
});
fs.writeFileSync('dist/index.html', compressed);
});容易被忽略的兼容性细节
压缩不是越狠越好，几个关键点常被跳过：
-
conservativeCollapse: true必须开——否则<span>A</span><span>B</span>可能压成<span>A</span><span>B</span>导致文字粘连（缺少空格） -
preserveLineBreaks: false要慎用——它会让<h1>\nTitle\n</h1>变成<h1>Title</h1>，虽不影响渲染，但某些 CMS 或 SSR 工具依赖换行做格式识别 -
removeEmptyAttributes会删掉<img src="">这类空属性，但若业务逻辑依赖该属性存在（比如 JS 检测），就得关掉
真正难的不是压缩动作本身，而是理解哪些空白能动、哪些动了就坏，以及压缩后要不要做回归验证——尤其涉及富文本、代码块或第三方组件嵌入时。
