collapsewhitespace:true 会删除内联元素间的空格节点，导致“helloworld”等显示错误；需搭配conservativecollapse:true和preservelinebreaks:false，并检查cms、ssr及inline-block布局等风险场景。
html-minifier 的 collapseWhitespace 为什么不能无脑开 true？
开 collapseWhitespace:true 看似能压体积，但会破坏内联元素间的自然空格——比如 <span>Hello</span><span>World</span> 压缩后变成 <span>Hello</span><span>World</span>，两个词紧贴着显示为 “HelloWorld”，而不是 “Hello World”。浏览器把换行/空格当作文本节点处理，而该选项会直接删掉这些节点。
真正安全的写法是搭配 conservativeCollapse:true（保留至少一个空格）和 preserveLineBreaks:false（不保留换行）。但即便如此，仍需检查所有含 <span></span>、<em></em>、<strong></strong> 或 <a></a> 并列的模板片段，尤其是 CMS 输出或 PHP echo 拼接的 HTML。
常见踩坑点：
- WordPress 主题中用
wp_nav_menu()生成的菜单项默认带空格分隔，压缩后菜单文字挤在一起 - Vue / React SSR 输出的 HTML 若含多行插值表达式（如
{{ item.name }} {{ item.price }}），空格会被误删 - 使用
display: inline-block的按钮组，依赖父容器换行产生的间隙，压缩后间隙消失导致错位
合并 HTML 模板时，include 和 partial 的顺序影响首屏渲染
很多构建流程（如 Gulp + gulp-file-include、Webpack + html-webpack-plugin 的 templateParameters）会在编译期把多个 HTML 片段合并成单个文件。但合并顺序不是“越靠前越好”——关键看资源加载时机。
例如：页头 中的 <link rel="preload"> 必须出现在实际用到该资源的 DOM 元素之前，否则 Chrome 不会提前加载。如果把 footer 的 JS <script></script> 合并到了 head 里，反而阻塞解析。
实操建议：
- 只合并静态结构部分（header、footer、sidebar），动态内容区域（main）保持独立或延迟注入
- 确保
<link rel="preload">、<script async></script>出现在它们所服务的 DOM 节点上方 200 行以内（Chrome 的预加载扫描窗口限制） - 避免在
开头就include一个含 50KB 内联 SVG 的 partial——它会拖慢 HTML 流式解析
gzip 与 HTML 压缩不是二选一，而是必须叠加使用
单独开 html-minifier 最多减 30% 体积；单独开 gzip（level 6）约减 60%；但先压缩再 gzip，实测可减 72–78%，因为冗余空白字符高度重复，极易被字典编码命中。
容易忽略的关键点：
- Node.js 的
compression中间件默认只对text/html响应启用 gzip，但若你用 Express 返回res.send('<div>...</div>')，MIME 类型可能是text/plain，gzip 就不会生效 - Nginx 配置里
gzip_types必须显式包含text/html application/xhtml+xml，否则 SSI 或 Edge Side Includes 生成的 HTML 不会被压缩 - Webpack 构建产物若已预压缩（如
CompressionPlugin输出.gz文件），Nginx 需开启gzip_static on，否则仍走运行时压缩，浪费 CPU
CDN 缓存 HTML 时，版本号不能只打在 JS/CSS 上
HTML 文件本身也要带版本标识，否则 CDN 缓存了旧 HTML，而它引用的 app.123456.js 已更新，就会出现「HTML 里的入口函数名已删，但 JS 还在调用」这类静默失败。
正确做法是让 HTML 的缓存失效策略和它所依赖的资源强绑定：
- 用构建时哈希生成 HTML 文件名（如
index.abc123.html），而非固定名index.html - 若必须用固定名（如 SEO 要求），则在 HTML 的
<meta name="version">或自定义 HTTP 头（如X-HTML-Version: abc123）里写入当前构建哈希 - CDN 缓存规则设为：当
X-HTML-Version变更时强制刷新，且缓存时间不超过 1 小时（防构建失败回滚来不及）
最麻烦的其实是 WordPress 或 Drupal 这类动态 CMS：它们生成的 HTML 无法在构建期哈希，只能靠 ETag 或 Last-Modified 做弱校验——这时就得在主题里加逻辑，把 JS/CSS 文件哈希注入 ，并让 HTML 缓存时间严格短于资源缓存时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
