html-minifier-terser 比手动或在线工具更安全高效，能智能跳过 pre/textarea/script 等敏感区域，避免破坏代码块和模板语法；需正确配置对象而非布尔值，并配合服务端 gzip/brotli 压缩才能真正提升传输性能。
直接用 html-minifier-terser 配合合理配置，比手动删空格快十倍，也比在线工具更可控、可复现——尤其当模板含 EJS、Nunjucks 或内联脚本时，随便粘贴到网页工具里容易误删变量或破坏结构。
为什么不能直接用正则替换空白
正则如 replace(/\s+/g, ' ') 看似简单，但会无差别抹掉 <pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<code> 里的缩进，导致代码块显示错乱；还会把 <script type="text/template"></script> 里的模板语法当普通文本压，引发运行时错误。浏览器解析 HTML 是基于 DOM 树的，不是靠空格计数。
-
html-minifier-terser默认跳过<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<style></style>、<script></script>内容，安全边界清晰 - 它先 parse 成 AST，再按语义压缩，不会把
calc(10px + 2em)变成calc(10px+2em)（CSS 解析器才管这个） - 若模板含
这类服务端语法，需设ignoreCustomComments: [//]，否则removeComments: true会把它干掉
Webpack 中 html-webpack-plugin 的 minify 必须写对象
常见现象是配了 minify: true 却没任何变化——因为 html-webpack-plugin v5+ 已废弃布尔值写法，不传对象就等于没开压缩。
- 正确写法是显式传入配置对象：
minify: { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true } - 若模板含中文注释，确保源文件编码为 UTF-8，且避免同时启用
removeComments和removeScriptTypeAttributes，否则某些旧版编码链路可能把中文转成乱码 - 不建议在开发环境开启
collapseBooleanAttributes，disabled="disabled"→disabled虽合法，但部分表单校验 JS 会依赖属性值存在
服务端 gzip/brotli 比文件压缩重要得多
只压缩 HTML 文件本身，体积通常只减 15%～30%；而 Nginx 启用 gzip on 或 brotli on 后，传输体积能再降 60%～80%，且对所有文本响应生效，包括 CSS/JS/JSON。
- 光配构建时压缩却不启服务端压缩，等于把瘦下来的文件仍以原始大小发出去
- 验证是否生效：打开 Chrome DevTools → Network → 刷新页面 → 点击 HTML 请求 → 查看 Response Headers 中是否有
Content-Encoding: gzip或br - Brotli 压缩率更高，但需确认客户端支持（现代浏览器都支持，微信内置 WebView 从 8.0.30 起也支持）
真正难的不是“怎么压”，而是判断哪些内容该留、哪些能删——比如 <pre class="brush:php;toolbar:false;"></pre> 里的空格、alt="" 属性、调试用的 <!-- DEV: ... --> 注释，删错一个就可能让可访问性失效或上线后才发现渲染异常。压缩永远要和测试一起走，而不是打包完就扔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
