纯删空格注释无效，必须配合服务端Gzip且验证Content-Encoding: gzip响应头；盲目启用removeOptionalTags或collapseWhitespace会破坏倒计时、库存渲染与按钮状态。
纯删空格和注释对秒杀页无效，不配服务端 Gzip，压缩再狠也白搭；更危险的是，盲目启用 removeOptionalTags 或 collapseWhitespace，可能让倒计时、库存渲染、按钮状态全部失灵。
为什么 html-minifier 默认配置在秒杀页上会直接崩
秒杀页不是普通静态页——它混着模板占位符（{{serverTime}}、v-if）、服务端包含指令（<!--#include file="header.html"-->）、内联 JSON（<script type="application/json">{...}</script>）和动态 data- 属性。html-minifier 按标准 HTML 解析器工作，遇到这些就报错或静默删掉整块。
-
ignoreCustomFragments必须显式配置，例如[/{{[^}]*}}/, /<!--#include.*?-->/]，否则{{countdown}}被清空，倒计时直接消失 -
removeComments: true会干掉<!-- ab-test: variant-a -->这类 A/B 分流标记，导致所有用户进 baseline，实验数据全废 -
collapseWhitespace: true在流式 SSR（如 Next.js App Router）下会破坏块级边界，触发 fallback 渲染，TTFB 反而变长 -
minifyJS: true对内联脚本（如秒杀初始化逻辑）大概率报Unexpected token，尤其含with、隐式全局变量或 eval 字符串拼接时
CDN 缓存 + HTML 压缩的致命组合
秒杀页核心状态（倒计时起点、剩余库存、用户资格）全靠服务端实时注入。CDN 缓存一份 HTML，等于把过期状态广播给所有人——缓存 10 秒，就可能多卖 100 件。
- 必须禁用 CDN 对 HTML 的缓存，或设
Cache-Control: no-cache, max-age=0，靠 ETag 或 Last-Modified 校验 - 若强制缓存，需确保服务端每次响应都带唯一
Vary: Cookie, X-User-Id，否则不同用户看到同一份缓存 - 某些 CDN（如 Cloudflare）会在缓存层自动注入埋点 script，若压缩后 DOM 结构变化，它可能拒绝缓存或降级为动态回源，反而拖慢首屏
真正有效的压缩必须验证三件事
压缩不是“跑通就完事”，必须确认它没破坏运行时行为。重点验证三个响应头与结构：
立即学习“前端免费学习笔记（深入）”；
- 检查响应头是否有
Content-Encoding: gzip—— 没这个，前端压缩 0 收益 - 确认 Nginx 的
gzip_types包含text/html，否则它根本不对 HTML 做压缩 - 用
curl -sI https://your-page.com | grep Content-Encoding验证，别只信本地 dev server - 打开浏览器 DevTools → Network → 找 HTML 请求 → 查看 Response → 搜索
{{、data-stock、disabled是否还在，别只看体积数字
按钮禁用、倒计时、库存更新三者必须共用同一状态源
它们不是三个独立模块，而是同一套原子状态在 DOM 上的投影。任何一方脱节，都会引发超卖或体验断裂。
- 倒计时必须用
setInterval每秒重算，每次调getServerTime()（基于server_time - Date.now()偏移），不用setTimeout递归 - 按钮
disabled状态必须绑定到isSubmitting变量，并在fetch().finally(() => isSubmitting = false)恢复，不能只等then - 库存字段必须带
data-stock属性，点击后先乐观更新el.textContent = parseInt(el.dataset.stock) - 1，再发请求；失败则回退并提示“库存已抢光” - 所有事件监听器加
once修饰符，防止 SPA 中组件反复挂载导致重复绑定
容错不是加 try-catch，是让 HTML 结构本身能扛住服务端注入失败、CDN 回源延迟、JS 加载中断这三类真实故障；压缩只是手段，别让它成为新故障的入口。
