HTML压缩工具就是把网页源码里那些不影响显示的多余字符删掉:换行、缩进、连续空格、HTML注释、标签间空白。一个手写的200行HTML页面,压缩后通常能少30%~60%的体积,比如12.4KB的页面能压到6.8KB左右。什么时候用?比如你把活动页交给运营,对方要贴进公众号后台或第三方建站系统,源码里一堆缩进和注释容易触发长度限制,先压一遍再粘贴就省事。工具在浏览器本地跑,不上传服务器,pre、textarea、script、style里的内容会原样保留,不会把JS里的字符串空格压坏。
| 对比维度 | 本工具 | 手工/替代做法 |
|---|---|---|
| 处理12.4KB页面耗时 | 粘贴后即时输出,约0.1秒内 | 手工删注释和缩进约5~10分钟,还容易漏 |
| 保护pre/script/style | 默认开启,区块内原样保留 | 手工处理需逐段判断,容易误删JS字符串空格 |
| 体积反馈 | 直接显示压缩前后字节数,如12480 B → 6821 B | 手工只能靠编辑器状态栏估算,误差大 |
| 注释处理 | 可一键删除全部HTML注释 | 手工查找<!-- -->逐条删,20条注释要翻半天 |
| 隐私 | 浏览器本地计算,源码不出设备 | 在线第三方服务可能上传源码,有泄露风险 |
正常情况下不会。HTML规范里,标签之间的连续空白、换行会被浏览器折叠成一个空格,所以删掉它们不改变渲染。但要注意inline元素之间的空格有语义:<span>a</span> <span>b</span>中间那个空格删了会变成ab。工具默认保留标签间单个空格,只压连续空白和换行,属于保守策略。
取决于源码风格。手写缩进4空格、带大量注释的页面,压缩率常见在35%~60%;已经用构建工具压过的产物,再压通常只有3%~8%。举个例子:一个12.4KB、含18条注释和4空格缩进的页面,压完约6.8KB,省45%。纯文本内容占比越高,压缩收益越小。
不会。工具把<script>和<style>当作受保护区块,内部内容原样输出。原因是JS里' a b '这种字符串、正则里的空格、模板字符串的换行都有语义,随手压会出bug。如果你确实要压JS,应该用专门的JS压缩器(如Terser),它做的是AST级变换,不是简单删空白。
不会。<pre>和<textarea>默认在保护名单里,因为它们按原样渲染空白。比如<pre>里用4个空格做代码缩进,删掉就全乱了。工具识别到这两个标签后,从开标签到闭标签之间的所有字符原样保留,包括换行和制表符。
不能。压缩是有损的文本变换,删掉的换行、缩进、注释无法从结果里恢复。所以建议保留原始文件,压缩只作为发布前的最后一步。如果源码要长期维护,别把压缩结果当源码存,否则下次改起来一行到底、没法读。
两者不冲突,应该都做。HTML压缩减少原始字节数,gzip在传输层再压一次。典型情况:12.4KB的HTML,minify后6.8KB,再gzip约2.1KB。服务器开gzip/Brotli是标配,minify的收益在于减少解析体积和某些不支持压缩的场景(如部分邮件客户端、内嵌模板)。
适用范围:标准HTML文本,含内联CSS/JS的页面也能处理,但只做空白和注释层面的压缩,不做AST级优化。精度说明:压缩率随源码风格波动,缩进越规整、注释越多收益越大;已压缩过的产物收益通常低于10%。隐私说明:所有计算在浏览器本地完成,源码不上传、不落盘、不经过服务器,关掉页面即清空。