HTML 压缩
访客下载的每一个 HTML 字节，都是浏览器在构建页面前要等待的字节，而大多数标记里都带着构建步骤本该清掉的冗余——缩进、注释，以及标签之间的空白。这个压缩工具一次粘贴就能去掉它们。由于真实页面里通常内嵌样式和脚本，它还会压缩 <style> 里的 CSS 和 <script> 里的 JavaScript，让整个文档更小，并把原始、压缩后与 gzip 三个体积并排显示，省了多少一目了然。它只在安全的前提下折叠空白，绝不改变渲染，全部在浏览器内完成。
- 折叠标签之间的空白与注释——仅在不改变页面渲染的前提下
- 不只整理标记，还会压缩内嵌的 <style> 里的 CSS 和 <script> 里的 JavaScript
- 把原始、压缩后与 gzip 三个体积并排显示，让你以服务器实际发送的大小来判断结果
- 全部在浏览器内完成，粘贴的标记（包括未发布内容）都留在本机
功能简介
压缩工具值得用的前提，是你能信任它的输出、并看得见收益。这个工具两点兼顾：可放心上线的安全压缩，以及证明值得做的数字。
- 01
安全折叠标记
去掉标签之间的空白与换行，但对空白有意义的内容保持原样。pre 与 textarea 里的文本、以及会影响布局的行内元素之间的空隙都被保留，所以渲染出的页面不变。
- 02
内嵌 CSS 与 JS 一并压缩
真实页面很少只有标记。每个 <style> 块里的 CSS 和每个 <script> 块里的 JavaScript 都会在同一步压缩，你不必再用别的工具单独挤这些字节。
- 03
删注释，留条件注释
默认删除 HTML 注释（它们从不出现在渲染页面上），但保留有含义的条件注释。调试时可用一个开关保留全部注释。
- 04
可信的体积明细
原始、压缩后与 gzip 体积随输入实时更新，旁边是精确的节省百分比。gzip 这个数字才对应真正经网络传输的大小。
- 05
由你掌控的选项
空白总会被折叠，但是否压缩内嵌的 CSS 与 JS、是否保留注释，各是一个开关，压缩到什么程度由你决定。
- 06
复制、下载或上传
从剪贴板粘贴，或从磁盘打开 .html 文件，然后复制结果或保存为 min.html 文件。整个流程只需几秒，且不接触服务器。
如何使用
只需几步，就能把可读页面变成可上线的最小版本，而且收益全程摆在眼前。
- 01
把 HTML 粘贴到输入栏，或用「上传」直接从磁盘打开 .html 文件。
- 02
选择选项。保持「压缩 CSS」「压缩 JS」开启以同时压缩内嵌代码，只在需要时才保留注释。
- 03
看输出旁的明细来确认收益：原始、压缩后与 gzip 体积，以及节省的百分比。
- 04
复制压缩后的 HTML 或下载为 min.html 文件，再接入提供生产标记的页面或构建步骤。
功能说明
让输出可放心上线、值得快速信任的那些细节。
- 基于 html-minifier-terser：它解析标记，并用成熟的优化器压缩内嵌的 CSS 与 JS，而不是盲目的文本替换。
- gzip 体积用浏览器内置的压缩来测量，所以这个数字反映真实服务器会发送的大小。
- 随输入和切换选项实时压缩，无需先按任何按钮结果就会更新。
- 解析错误会就地连同信息一起显示，而不是悄悄产出损坏或空的结果。
- 不上传、不记录。粘贴的 HTML（包括未发布内容）留在浏览器里，关闭标签页后即消失。
适合哪些场景
把 HTML 削到最精简，在这些场景里最划算。
-
让页面更快
更小的标记更早抵达浏览器、更早解除解析阻塞，有助于 First Contentful Paint 以及搜索引擎看重的 Core Web Vitals。
-
没有打包器的构建步骤
在静态站点、落地页或邮件模板里没跑打包器时，把 HTML 粘到这里，就能得到与流水线相同的压缩。
-
内联关键路径文档
当你交付一个把 CSS 和 JS 都内联进来的自包含 HTML 文件时，三者一起压缩，就是精简负载与臃肿负载的差别。
-
精简生成的标记
模板引擎、CMS 或邮件搭建器的输出常常未压缩。在这里过一遍，就能在抵达用户前把字节省回来。
压缩 HTML 到底做了什么
压缩不是混淆，也不等于 gzip 压缩。它去掉浏览器不需要的字符，同时让渲染结果完全一致。下面是去掉了什么，以及为什么安全。
-
标签之间的空白
让标记可读的缩进与换行，浏览器大多会忽略，所以会被折叠。例外是 pre 与 textarea 里的空白，以及行内元素之间那一个会影响布局的空格——这些都会保留。
-
注释
HTML 注释是写给人看的、从不渲染，所以会被完全删除。例外是面向特定浏览器的条件注释，它们会被保留。
-
内嵌的代码
样式和脚本就住在 HTML 里，只整理标记的压缩工具会把大部分体积留在原地。压缩 <style> 里的 CSS 和 <script> 里的 JS，才能让真实页面真正变小。
-
是安全压缩，不是有损
压缩只去掉浏览器渲染同一页面所不需要的东西。它不是混淆：标记照样以完全相同的方式工作，只是不再为人类阅读而排版。
-
为什么 gzip 才是关键数字
服务器用 gzip 或 brotli 压缩后再发送 HTML，而它们本就会折叠重复的空白。压缩仍然有用，因为它去掉了传输压缩做不到的部分、并给压缩器更干净的输入，但收益应以 gzip 体积而非原始字节来判断。
-
生产环境用压缩，源码保持可读
压缩后的 HTML 很难编辑，所以它属于构建产物，而不是仓库。把可读的模板留作源码，压缩作为上线前的最后一步。
使用建议
让压缩后的 HTML 既小又不出意外的一些习惯。
- 把压缩作为构建的最后一步并部署其产物。绝不手动编辑压缩后的 HTML，也不要把它当作事实来源提交。
- 以 gzip 体积判断收益，因为那才是服务器实际传输的大小。原始字节省得多，经压缩后可能所剩无几。
- 生产环境保持「压缩 CSS」「压缩 JS」开启，让内嵌代码与标记一起被压缩，而不是把它留成文件里最重的部分。
- 为压缩后的文件开启 gzip 或 brotli，并配合合理的缓存时长。压缩与传输压缩是叠加关系，不能互相替代。
- 留意对空白敏感的地方：如果某处布局依赖行内元素之间的空格，压缩后请确认它仍然正常，因为那个空格是有意义的。
边界与注意事项
这个工具做什么，又把什么留给其他步骤。
- 它压缩单个 HTML 文档及其中内嵌的 CSS 与 JS，不会去抓取外链的样式表、脚本或图片。
- 它不会转译现代 JS、不给 CSS 加厂商前缀，也不为旧浏览器做降级。这些请交给构建工具。
- Handlebars、Jinja、ERB 等模板语言本身不是 HTML；请压缩渲染后的输出，而不是模板源码。
- 语法错误会停止压缩并报出，而不是绕过，所以严重损坏的输入不会产出部分结果。
常见问题
关于压缩 HTML、它改变了什么、以及何时使用的常见问题。
压缩会改变页面的渲染吗？
不会。压缩只去掉浏览器不需要的字符，比如标签之间的空白和从不渲染的注释。会影响布局的空白——如 pre 里的文本、行内元素之间的空隙——都会被保留，所以渲染出的页面前后看起来一样。
它会压缩 HTML 里的 CSS 和 JavaScript 吗？
会。每个 <style> 块里的 CSS 和每个 <script> 块里的 JavaScript 都会与标记一起压缩，并各有一个开关可关闭。真实页面里内嵌代码往往占了大半体积，所以大部分收益正来自这里。
压缩和 gzip 有什么区别？
它们协同工作。压缩改的是 HTML 本身，去掉压缩器无从知晓的多余内容；gzip 或 brotli 再对你发送的内容做传输压缩，在网络上折叠重复。两者都要：先压缩得到最干净的输入，再让服务器做传输压缩。真正的收益看这里显示的 gzip 数字。
我的 HTML 能小多少？
取决于源码怎么写。排版宽松、内联样式和脚本很大的标记可能大幅缩小，而本就紧凑的页面省得少。一旦算上 gzip，百分比会下降，因为压缩本已找回了大部分空白——这也是 gzip 数字更诚实的原因。
我该把压缩后的 HTML 提交到仓库吗？
不该。压缩后的 HTML 是构建产物，不是源码。提交你和同事实际编辑的可读模板或文档，把压缩文件作为上线前的最后一步生成。把压缩输出签入会让评审难读、合并痛苦。
能压缩 Handlebars、Jinja 这类模板文件吗？
不能直接处理。这个工具压缩的是标准 HTML，也就是浏览器收到的内容。{{ }} 或 {% %} 这类模板语法本身不是合法 HTML，请改为压缩渲染后的输出，或使用为你模板语言打造的工具。
我的 HTML 会被上传吗？
不会。一切都在浏览器内运行。你粘贴的 HTML、上传的文件和结果都在本地处理，绝不传输或存储，关闭标签页后即消失，所以即使是私有或未发布的标记也安全。