必开的四个配置项是collapsewhitespace: true、removecomments: true、removeredundantattributes: true、minifycss: true（或minifyjs: true），缺一不可；webpack中html-webpack-plugin v5+必须传对象而非布尔值，否则压缩不生效。
html-minifier-terser 必开的四个配置项
不设 collapseWhitespace: true，空白就白删；不设 removeComments: true，注释全留着；removeRedundantAttributes: true 能干掉 type="text/css" 这类冗余属性；minifyCSS: true 和 minifyJS: true 则顺带压缩内联样式和脚本——这五项里前四项是体积削减主力，缺一不可。
Webpack 中 html-webpack-plugin 的 minify 配置陷阱
新版插件（v5+）的 minify 不再接受 true 或 false，传布尔值等于没配。常见错误是写成 minify: true，结果输出 HTML 完全没变化。
- 必须显式传对象：
minify: { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true } - 若项目需兼容旧版 IE（如 IE11），加
caseSensitive: true和conservativeCollapse: true，避免把class="foo bar"压成class=foo bar导致解析失败 -
preserveLineBreaks: true要配合collapseWhitespace一起用，否则<pre class="brush:php;toolbar:false;"></pre>里的换行会被误删
哪些标签和属性能安全省略，哪些不能碰
HTML5 允许省略的语法，现代浏览器都支持，但工具默认不一定启用。手动删或靠工具压缩时，得知道边界在哪里：
- 可放心省略：
、、标签；<meta charset="utf-8">的闭合；disabled、checked等布尔属性的值（<input disabled>→<input disabled>） - 不能省略：
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<script></script>、<style></style>标签内部所有空白——它们有语义，删了会破坏代码缩进、表单预设值或 CSS/JS 执行 - 慎用
collapseBooleanAttributes：它会把required="required"变成required，看似省事，但某些 CMS 或服务端模板引擎可能依赖带值写法，一开就出渲染异常
本地调试时如何验证压缩是否生效
别只看文件大小变化，得确认 DOM 结构没被意外破坏：
- 用
curl -s http://localhost:8080/index.html | wc -c对比压缩前后字节数，降幅通常在 40–60% - 打开 DevTools → Elements 面板，检查
<pre class="brush:php;toolbar:false;"></pre>内容是否仍保留原始换行，<script></script>是否能正常执行 - 重点测试含空格敏感结构的页面：比如用
white-space: pre-wrap的段落，确保压缩后没多出或少掉空格
真正容易被忽略的不是“怎么配”，而是压缩后是否还保持语义完整性——尤其是那些靠空白维持布局或行为的边缘场景，比如 <img> 后紧跟文字产生的间隙、display: inline-block 元素间的换行符转空格，这些不会报错，但会悄悄改变视觉表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
