html模板体积优化需分构建时精简与服务端压缩两层：必须配置html-minifier-terser的collapsewhitespace、removecomments、removeredundantattributes，禁用removeemptyattributes；手动删除废弃标签、冗余meta、空属性及可选标签；同时务必启用brotli/gzip，否则优化无效。
HTML模板体积优化不是靠“压缩工具一开就完事”，而是分两层：构建时精简代码结构，部署时启用服务端压缩。跳过任一层，体积都减不下来。
html-minifier-terser 配置哪些项才真正生效
默认配置几乎等于没开——它只删注释，其余空白、空属性、可选标签全留着。关键配置漏一项，体积就纹丝不动。
-
collapseWhitespace: true：必须开，否则换行缩进全保留；但注意<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<script></script>、<style></style>内部空白不能动，工具默认会跳过，放心用 -
removeComments: true：安全，但若用了构建标记（如<!-- build:css -->），得配ignoreCustomComments: [/^build:/] -
removeRedundantAttributes: true：删type="text/javascript"这类冗余值，现代浏览器全支持，无兼容风险 -
removeEmptyAttributes: false：别开！尤其对<table> 或自定义元素，空属性可能被 JS 依赖（如 <code>document.querySelector('[data-loaded]')），删了逻辑就断哪些 HTML 结构能直接删，不用等工具
工具压不掉本不该存在的东西。这些内容手动搜一遍、批量删掉，比调参数更立竿见影。
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">：IE 已停服，留着纯占体积，且可能触发怪异模式 -
<font></font>、<center></center>、<u></u>等废弃标签：不仅增大体积，还强制浏览器进入 Quirks Mode -
、、标签：HTML5 允许省略，浏览器自动补全，删了省几百字节 -
class=""、id=""、data-id=""这类空属性：JS 查询（如document.querySelector('[data-id]')）仍能匹配，但语义为空，建议直接删
嵌套过深或含大量
<code>的模板为什么慢不是体积大导致加载慢，而是解析开销高。浏览器构建 DOM 树时，每层嵌套都要做节点计算；
<code>标签内文本越多，HTML 解析器越容易卡在字符实体转义和换行处理上。- 嵌套超过 4 层的
<div> 块，优先改用 <code>display: flex或grid布局，DOM 节点数直接降一半 - 文档中大量
<code>helloworld连写，不如合并成一个<code>helloworld，减少标签开销 - 服务端 Gzip/Brotli 压缩比客户端 HTML 压缩效果强得多——同样内容，Gzip 可压掉 50%~70%，且不改一行模板
-
<img>的src是独立请求，但路径写错（如指向 5MB PNG）会让 HTML 文档看似小，实际首屏加载巨慢 - 内联 CSS/JS 超过 1KB 就该抽离：压缩后仍大，且无法缓存，每次 HTML 更新都得重下
-
<picture></picture>+srcset必须配对用，否则 iPhone 等高 DPR 设备仍会拉原图，<img src="x.webp">单写 fallback 无效
图片和内联资源怎么影响 HTML 体积
很多人以为 HTML 文件小就没事，其实
<img src="big.jpg">或<script>...</script>里的内容，全算进首屏加载体积里。浏览器要下载、解析、执行，一步卡住就白优化。最容易被忽略的是：HTML 模板本身体积再小，如果服务端没开 Brotli，传输量还是原始大小；而开了 Brotli 后，哪怕模板没精简，也能压掉一大半。这两件事谁先谁后，决定了优化到底有没有效果。
-
