HTML体积超标本质是代码冗余而非压缩未启用，需从源头优化：删除无用注释、避免内联CSS/JS、清理重复属性与未闭合标签，并针对框架模板（如v-html、条件渲染残留、scoped属性）做专项处理。
HTML 文件体积超标，本质不是压缩没开，而是代码本身在“裸奔”。 单纯依赖 Gzip 或 Brotli 压缩，最多压掉 70%，但若原始 HTML 已含大量冗余空格、无用注释、内联样式/脚本、重复属性或未关闭标签，压缩后的残余仍远超合理阈值（比如首屏 HTML 超过 15KB）。真正有效的“极致优化”，必须从源头——HTML 编写习惯与构建流程——动手。
为什么 HTML 压缩后还是大？常见冗余来源
很多团队开了 html-minifier 却收效甚微，问题不在工具，而在输入源。以下几类内容，压缩器默认不删、也不敢删：
-
<!-- 这是首页 banner 的说明 -->类注释：开发阶段有用，上线即垃圾，html-minifier默认保留，需显式配置removeComments: true - 手写内联
<style>或<script>：它们无法被单独缓存，且阻碍流式解析；更糟的是，这些代码往往未经压缩就塞进 HTML - 重复属性，如
<div class="btn" class="primary">：浏览器取后者，但前者白占字节 - 未闭合标签（
<p>文本</p><br><img src="x">）：虽能渲染，但解析器需做容错处理，增加解析开销，部分 minifier 甚至因语法模糊而跳过压缩
uni-app / Vue 项目中 HTML 模板的隐性膨胀点
这类框架生成的 HTML 常被忽略两个“静默增重项”：
-
v-html绑定的内容若来自后端富文本，极易带入大量<span style="color:#333">、空<div></div>、冗余<font>标签——这些不会被html-minifier清理，需服务端预处理或前端 DOM sanitizer 介入 - 条件渲染残留：如
<div v-if="false">...</div>在 SSR 或预渲染时若未剔除，会原样输出到 HTML 中。检查vue-server-renderer或@vue/preload-webpack-plugin配置是否启用removeEmptyElements - uni-app 的
<template>编译结果里常含data-v-xxxx属性，虽用于样式隔离，但对首屏 HTML 体积贡献显著；可通过构建时关闭scopedCSS: false（配合 CSS Modules 或 BEM）或使用postcss-uncss清理未用属性
构建阶段如何让 HTML 压缩真正生效
别只依赖 “开了压缩” 这个动作，关键看配置是否击中痛点：
立即学习“前端免费学习笔记（深入）”；
- Webpack +
html-webpack-plugin：必须传入minify对象，且至少包含{ collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true } - Vite 用户注意：
build.minify默认只压缩 JS/CSS，HTML 压缩需额外插件，如vite-plugin-html并配置minify: true，否则index.html原样输出 - 警惕“伪压缩”：某些 CI 脚本在构建后用
sed或正则粗暴删空行，可能误删换行敏感内容（如<pre>内文本），应坚持用标准 parser（如parse5底层的html-minifier-terser）
最易被忽略的其实是 HTML 的“语义密度”——同一功能，用 <button> 代替 <div onclick="xxx"> 不仅更健壮，还省下 20+ 字节的事件绑定代码。极致大小优化，最终拼的不是工具链多先进，而是每一处标签、属性、换行，是否都经得起“它非得在这儿不可”的拷问。
