HTML压缩需兼顾浏览器解析规则与可维护性：安全删除非语义空白，省略HTML5允许的冗余标签和属性，慎用自动化工具配置，并优先优化媒体资源与外链脚本而非内联代码。
HTML 文件体积大，主要不是因为标签多，而是因为空白字符和冗余结构在反复叠加。 直接删掉换行和缩进看似简单，但容易破坏可维护性，甚至引发渲染异常；用构建工具压缩又常忽略语义精简。真正有效的压缩，得从「浏览器怎么解析」和「人怎么维护」两个角度同时下手。
哪些空白字符可以安全删除
HTML 是“宽松解析”的：多个空格、制表符、换行符在文本节点中会被合并为单个空格；但在 <pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<script></script>、<style></style> 内部，空白有语义，不能动。
- 页面级的换行、缩进（如
<div>\n <p>xxx</p>\n</div>）可完全移除，不影响渲染 - 标签之间的空白（如
<span>a</span> <span>b</span>中的空格）会变成一个空格，若不需要这个空格，可直接连写：<span>a</span><span>b</span> -
<img alt="HTML如何压缩体积_标签精简与空白处理【技巧】" >后紧跟换行+文字，可能产生意外空格，建议用注释消除：<img src="x" alt="HTML如何压缩体积_标签精简与空白处理【技巧】" ><!--\n-->文字
哪些标签属性和闭合可以省略
HTML5 允许大量语法简化，但浏览器兼容性已不是问题（IE11 及以下才需谨慎），现代项目可放心使用：
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
立即学习“前端免费学习笔记（深入）”；
-
、、标签可省略——浏览器自动补全，且 DOM 中始终存在 -
<meta charset="utf-8">不需要，自闭合即可；同理<link rel="stylesheet" href="x.css">也不需要斜杠 -
<boolean></boolean>属性（如disabled、checked）值为空字符串或与属性名一致时，可只写属性名：<input disabled>等价于<input disabled> -
<option></option>的selected、<script></script>的type="text/javascript"在 HTML5 中均可省略
用 html-minifier-terser 做自动化压缩时的关键配置
它比老版 html-minifier 更可靠，但默认配置保守，不启用关键选项等于白装：
- 必须设
collapseWhitespace: true—— 否则空白照旧 - 设
removeComments: true，但保留构建标记如<!-- build:css -->需配合ignoreCustomComments -
removeRedundantAttributes: true会删掉type="text"这类默认值，安全 - 慎用
useShortDoctype和removeEmptyAttributes：前者没问题，后者会删class=""或data-id=""，可能影响 JS 查询，建议关闭 - 若用了
<template></template>或 Web Components，加ignoreCustomFragments: [/<code>/]避免误删服务端模板占位符
为什么 inline CSS/JS 不该靠 HTML 压缩来“省体积”
把 <style></style> 或 <script></script> 写在 HTML 里，即使压缩后体积略小，也牺牲了缓存能力。浏览器无法单独缓存内联脚本，每次 HTML 更新都会强制重下全部逻辑。
- 真实收益：外链资源开启 Gzip/Brotli + HTTP 缓存，比 HTML 里塞 2KB 压缩 JS 高出一个数量级的加载效率
- 内联只适合极小片段（如首屏关键 CSS ≤ 1KB），且必须用
minify-css-string类工具单独压缩，而非依赖 HTML 压缩器 -
<script type="module"></script>不能内联压缩——V8 对内联模块的解析开销更高，实测比外链慢 10%~20%
最易被忽略的一点：压缩 HTML 本身不解决资源引用膨胀。一个 <img src="big.jpg" alt="HTML如何压缩体积_标签精简与空白处理【技巧】" > 占 2MB，删掉前后所有空白也救不回带宽。真正的体积瓶颈，永远在媒体资源、第三方脚本和未拆分的巨型 bundle 上。
