HTML 压缩工具
使用 html-minifier-terser 压缩 HTML 代码。合并空白字符、删除注释、压缩内联 CSS/JS,并实时显示节省的体积。
大小:
大小: · 节省 %
处理中…
使用方法
- 1 将您的 HTML 代码粘贴到左侧输入框中。
- 2 根据需要开启或关闭合并空白字符、删除注释、压缩内联 CSS/JS 等选项。
- 3 点击「压缩」按钮,立即查看节省的体积。
为什么使用此工具
- 基于 html-minifier-terser 运行——它是仍在积极维护的 html-minifier 的继任者。
- 内联的 <style> 代码块通过 clean-css 处理,内联的 <script> 代码块通过 terser 处理。
- 相关库采用懒加载方式——在您点击「压缩」之前页面始终保持轻量。
- 并排对比前后体积,并可直接下载压缩后的文件。
常见问题
这个工具会破坏我的 HTML 结构吗?
默认设置比较保守,会保留属性的引号、void 元素标签以及 DOCTYPE 声明。但在应用到生产环境模板之前,仍建议仔细检查压缩结果。
如何将压缩后的代码重新格式化?
可以使用 <a class="underline" href="/html-formatter">HTML Formatter</a> 对压缩结果进行美化排版,方便检查。
这个工具会压缩 HTML 中内嵌的 SVG 吗?
SVG 内部的空白字符和注释同样会被合并,但不会对 SVG 各元素进行专门的优化——如需这类优化,请使用专门的 SVGO 工具。
什么是 HTML 压缩工具?
HTML 压缩工具可以减小 HTML 代码的体积,让页面加载更快。该工具基于 html-minifier-terser 构建,能够合并空白字符、删除注释、压缩内联 CSS/JavaScript,并实时显示节省的体积。所有处理都在浏览器本地完成,HTML 代码不会被上传到服务器。
功能特性
空白与注释清理
压缩多余的空白并删除注释,同时保持渲染结果不变。
内联 CSS 与 JS 压缩
通过 html-minifier-terser,同时压缩 <style> 和 <script> 中的内容。
100% 私密
压缩过程在您的设备上运行——不会上传任何内容。
示例
Input
<div> <!-- c --> <p>Hi</p> </div>
Output
<div><p>Hi</p></div>
常见使用场景
-
1
加快页面加载速度
减小 HTML 体积,提升加载时间和 Core Web Vitals。
-
2
压缩邮件模板
在发送前压缩事务性邮件的 HTML。
-
3
为生产环境做准备
作为构建步骤的替代方案,从模板中去除注释和空白。
Zerethon 的 HTML 压缩工具使用 html-minifier-terser 精简标记代码,加快页面加载速度,全部在浏览器中完成。它会压缩多余的空白、删除注释,并压缩内联的 CSS 和 JavaScript,同时实时显示节省的体积。标记代码在客户端处理,绝不会上传到服务器。
- 分类
- 开发者
- 价格
- 免费
- 隐私
- 基于浏览器
- 注册
- 无需
参考资料
- html-minifier-terser — GitHub
- HTML Standard — WHATWG
隐私
除非另有说明,否则你的数据永远不会离开浏览器。HTML 压缩工具 完全在客户端运行 — 无需上传服务器,不记录日志,不追踪你输入的内容。
相关工具
在 Zerethon Social 上创作、分享与成长
免费注册。赚取积分,收集成就,与全球创作者建立联系。