html压缩对网络传输体积几乎没影响，因其仅减少源码体积，若服务器未启用gzip/brotli（如nginx漏配gzip on），network面板中size仍显示未压缩大小；需确保响应头含content-encoding: gzip或br才生效。
单独做 HTML 压缩（比如用 html-minifier-terser 删空格、去注释）对网络传输体积几乎没影响——除非你的服务器压根没开 Gzip 或 Brotli。
为什么 HTML 压缩后 Network 面板里 Size 没变？
浏览器 DevTools 的 Network 标签页里看到的 Size 是实际发出去的字节数，它只反映传输层是否压缩。HTML 文件被 minify 后体积变小了，但若响应头里没有 Content-Encoding: gzip 或 br，服务器就原样发，浏览器收到的就是未压缩的 85KB，不是压缩后的 22KB。
常见错误现象：
- 本地跑
minify把index.html从 120KB 压到 85KB，但线上查 Network → Size 还是 120KB - 用了
HtmlWebpackPlugin的minify选项，但 Nginx 配置漏了gzip on - 误以为
<meta http-equiv="Content-Encoding" content="gzip">能触发压缩（完全无效）
html-minifier-terser 关键参数怎么设才不翻车？
默认配置容易破坏运行时行为，尤其在含模板语法或现代 JS 的页面中。
实操建议：
-
collapseWhitespace: true必开，但要确认 CSS 没依赖 inline-block 元素间的空格（否则布局错乱） -
removeComments: true安全，但若 HTML 里有{{ variable }}或{% if %}类模板占位符，得加ignoreCustomComments: [/^\s*{{.*}}\s*$/]避免误删 -
minifyJS: true很危险：会尝试压缩内联<script>const x = `hello ${world}`</script>，ES6 模板字符串可能被毁；建议改用minifyJS: { compress: false }或直接关掉 - 别碰
removeScriptTypeAttributes：某些旧版 IE 或 Cypress 测试会依赖type="text/javascript"存在
Nginx 开启 gzip 和 brotli，哪个更值得配？
Brotli 压缩率比 Gzip 高 15–20%，但限制多；Gzip 兼容性好，开箱即用。
配置要点：
- Gzip 最小启用阈值设为
gzip_min_length 1024，避免压缩几 KB 的小响应反而增加 CPU 开销 - 必须显式声明类型：
gzip_types text/html text/css application/javascript（text/html默认已包含，但写全更稳妥） - Brotli 需 Nginx ≥ 1.11.6 + HTTPS，且客户端需支持（Chrome/Firefox/Edge 新版都行，Safari 11+）；启用前先确认 CDN 是否透传
br编码 - 别同时开 gzip 和 brotli 并让它们竞争——Brotli 应作为首选，Gzip 当 fallback；Nginx 配置里用
gzip off;+brotli on;即可
动态 HTML（PHP/SSR）还能用 HTML 压缩吗？
能，但方式不同：不能靠构建时 minify，得在输出阶段拦截。
例如 PHP：
- 用
ob_start()注册回调函数，在echo前处理缓冲区内容 - 回调里调用正则或轻量解析器删注释、合并空白——但别自己写复杂逻辑，推荐用现成库如
jonnyw/php-html-purifier的简化版 - 更现实的做法是：跳过 HTML 层压缩，确保
Content-Encoding: br已生效，因为 SSR 输出通常带大量变量插值，手动 minify 易出错 - 真正该压的是内联 CSS/JS：在模板里把关键样式提前，用
minifyCss工具预处理后再echo
最常被忽略的一点：HTML 压缩和传输压缩是两个独立环节，前者发生在文件生成时，后者发生在响应发出前；跳过任一环，都拿不到那 70% 的体积缩减。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
