html体积超标主因是源码冗余而非压缩未启用；需手动清理注释、内联脚本、框架残留，并正确配置html-minifier关键选项如removecomments、collapsewhitespace等。
HTML 文件体积超标，根本不是压缩没开，而是代码在“裸奔”。开了 html-minifier 却没效果？问题大概率出在源码本身——工具不删注释、不碰内联脚本、不清理框架残留，只等你手动清。
html-minifier 配置不生效的典型表现
常见现象：index.html gzip 后仍超 15KB；构建产物里还留着 <!-- TODO: 权限校验未接入 -->；<div class="wrapper"><div class="inner"> 套娃三层但没语义；<code>v-if="false" 的空标签照常输出。
- 默认配置下
removeComments: false，所有 HTML 注释原样保留 -
collapseWhitespace: false时，换行缩进全算字节，尤其模板引擎生成的 HTML 更明显 -
removeRedundantAttributes不处理type="text/javascript"这类冗余，但可能误删 EJS 模板中的 - Vue/uni-app 的
data-v-xxxx属性不会被删，除非显式启用removeAttributeQuotes+removeOptionalTags组合
Webpack 中 html-webpack-plugin 的真实压缩姿势
只传 minify: true 是无效的。必须显式传入对象，且关键项不能漏：
-
collapseWhitespace: true—— 删换行和多空格，对模板生成 HTML 收效最直接 -
removeComments: true—— 开发期注释上线即垃圾，不关它，html-minifier就是摆设 -
removeRedundantAttributes: true—— 干掉type="text/css"、charset="utf-8"等默认值 -
minifyCSS: true—— 但需配合css-minimizer-webpack-plugin，否则只是开关没后端 -
keepClosingSlash: true—— 避免把<img>变成<img>导致某些旧 WebView 解析异常
注意：minifyJS: true 会尝试压缩内联 <script></script>，但若含 ES6+ 语法或模板字符串，大概率报错，建议交由 terser-webpack-plugin 统一处理。
Vue / uni-app 模板里的静默增重项
框架编译层自带膨胀，html-minifier 压根看不见这些内容：
-
v-html渲染富文本时，后端返回的<font color="#333">文字</font><div></div>不会被清理，得前端用 DOMPurify 或服务端预过滤 - SSR 输出中残留
<div v-if="false"></div>，检查vue-server-renderer是否启用removeEmptyElements: true - scoped 样式注入的
data-v-xxxx属性，单个不重，但首屏 20 个组件就是 400+ 字节，可关scopedCSS: false改用 BEM - 条件编译（如 uni-app 的
#ifdef MP-WEIXIN）若没走构建剔除，会把无效 HTML 塞进最终产物
gzip 后仍超 15KB？先查原始 HTML 有没有 80KB+
gzip 压缩率再高，也救不了结构混乱的源码。实测：一个嵌套 7 层 <div> 的商品列表，光标签就占 3.2KB；而改用 <code><ul class="list"></ul> + Flex 布局，DOM 节点减半，HTML 体积直降 4.7KB。
- 用
curl -s https://yoursite.com | wc -c查原始字节数，超 80KB 就该重构结构，别只调 minifier 参数 - 内联 CSS 必须 ≤ 14KB，否则突破 TCP 初始窗口，触发额外 RTT —— 这比删 1KB 空格影响大得多
- 避免把 JSON 数据塞进
data-属性，比如data-config='{"a":1,"b":2,...}'，百来个字段轻松吃掉 5KB+ - 检查是否手写
@import在内联<style></style>里，它会让浏览器发起阻塞请求，FCP 直接退化
真正卡住体积的，从来不是空格和注释，而是没想清楚“这个 div 到底要不要存在”。
