html-minifier在webpack中需通过html-webpack-plugin的minify选项显式启用，核心配置包括collapsewhitespace: true、removecomments: true和removeredundantattributes: true，且推荐使用维护分支html-minifier-terser以确保兼容性与稳定性。
html-minifier 在 Webpack 中的正确启用方式
Webpack 默认不处理 HTML 文件内容，html-webpack-plugin 仅负责注入资源，不会压缩源码中的空白。必须显式集成 html-minifier-terser（原 html-minifier 的维护分支）并配置参数，否则构建产物仍保留缩进与换行。
-
collapseWhitespace: true是核心开关，但单独开启不够——它只合并连续空白，不删除标签间的换行符 - 需同时设置
removeComments: true和removeRedundantAttributes: true，否则注释和重复属性（如多次写type="text"）仍残留 - 对
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<script></script>等标签，默认会跳过压缩；若误配ignoreCustomFragments，反而导致内容被破坏 - 示例配置片段：
new HtmlWebpackPlugin({<br> template: 'src/index.html',<br> minify: {<br> collapseWhitespace: true,<br> removeComments: true,<br> removeRedundantAttributes: true,<br> removeScriptTypeAttributes: true,<br> removeStyleLinkTypeAttributes: true,<br> useShortDoctype: true<br> }<br>})
为什么 Gulp + gulp-htmlmin 容易漏掉 inline-block 间隙
工具链层面的压缩 ≠ 渲染层间隙消除。gulp-htmlmin 只清理源码空白字符，但 display: inline-block 元素间的视觉间隙，本质是浏览器将 HTML 换行符解析为一个空格字符后渲染出的像素间距（约 4px），压缩后该空格仍存在，只是看不见了。
- 即使
collapseWhitespace: true生效，它也不会移除<div> 和 <code><span></span>标签之间的换行——因为那是两个块级/内联元素的边界，不是“连续空白” - 真正起作用的是 CSS 层面的干预：父容器设
font-size: 0，子元素再设回正常字号；或改用display: flex - 若在 Gulp 流程中混用
gulp-htmlmin和动态模板（如 Nunjucks），需注意模板引擎输出的字符串是否已含换行——压缩器无法区分“人为缩进”和“语义换行” -
v-if、v-for、JSX spread 操作符等语法会被转为注释或占位文本，removeComments: true可能误删逻辑标记 - Vue CLI 默认使用
html-webpack-plugin+html-minifier-terser，但若自定义index.html模板含 Mustache 表达式（如{{ VUE_APP_TITLE }}），需配置ignoreCustomFragments: [/{{[^}]*}}/]避免被当作普通文本清除 - React 项目若用
create-react-app，其内置压缩不支持自定义 HTML 选项；必须 eject 或改用craco注入html-webpack-plugin配置 - 关键判断：先运行未压缩构建，查看生成的
index.html内容是否含双大括号、指令语法——若有，必须加ignoreCustomFragments -
<pre class="brush:php;toolbar:false;"></pre>和<code>块内的缩进是否被破坏？检查是否误启collapseInlineTagWhitespace（默认 false，但手动设为 true 就危险） - 表单控件（
<input type="number">、<select></select>）placeholder 文本是否因父级font-size: 0而不可见？这是 CSS 层间隙方案的典型副作用 - 服务端渲染（SSR）场景下，Node.js 环境的
html-minifier版本是否与浏览器解析行为一致？例如旧版对
Vue / React 项目里 html-minifier 的兼容性陷阱
单文件组件（SFC）或 JSX 中的 HTML 片段，经编译后生成的字符串可能含非标准结构，直接丢给 html-minifier 会报错或删错内容。
上线前必须验证的三个空白相关表现
自动化压缩后，不能只看文件体积下降就认为成功。有些空白影响隐蔽，但线上会暴露。
