移动端首屏优化
前端工程师小陈接到需求：移动端页面首屏体积必须控制在 150KB 以内，但现有模板光 HTML 就有 40KB，加上 CSS 和 JS 远超阈值。他用本工具压缩 HTML，移除所有缩进空格、换行符和模板注释，仅此一项就将 40KB 压到 18KB；再开启属性优化（移除默认 type 值、精简布尔属性写法），最终 HTML 降至 12KB，为 CSS 和 JS 腾出宝贵带宽，首屏加载时间从 2.3 秒降到 1.1 秒。
开发者工具 · JSON / 数据格式
HTML 压缩
移除空白/注释/属性优化
✓本地处理 · 不上传
✓免费 · 无需登录
✓无次数限制
压缩选项 · 可叠加 options
受保护：<pre>
<textarea>
<script>
<style> 内部空白不被折叠（script/style 仅按勾选做安全的空白压缩）。
HTML 输入 input
压缩结果 minified
原大小 before0 B0 字符
压缩后 after0 B0 字符
减少 saved0 B原 − 后
压缩率 ratio
0%
就绪 · 纯本地压缩，代码不上传、不入 URL（仅选项入 hash）
第一节
关于本工具
About从编辑器里拖出一段几百行的 HTML，手动删空格和注释能删到怀疑人生。这个工具直接吃掉源码，清掉所有无意义的空白、注释，并顺手把属性值里的引号、布尔属性做精简——最终体积能压掉 20% 到 40%。处理全程在浏览器本地跑，原始文件不会离开设备，适合上线前批量压缩页面、或者给邮件模板减重用。
使用场景
邮件模板体积超限
市场部阿杰要群发 3 万封活动邮件，邮件服务商限制单封 HTML 不超过 100KB。设计稿导出的模板带大量 inline 样式和注释，体积 135KB。他用本工具压缩：移除所有注释（<!-- 占位说明 --> 等）、合并连续空白符、精简属性（class="" 改为空 class）。压缩后 78KB，符合渠道限制，且因文件变小，发送队列处理速度提升 40%，3 万封提前 20 分钟发完。
Git 仓库臃肿排查
后端老张接手一个遗留项目，发现 .html 文件每次提交 diff 都很大——原因是大家用 IDE 自动格式化，缩进风格不统一，换行符混用 CRLF/LF。他用本工具对所有历史 HTML 做标准化压缩：统一移除缩进、换行、多余空格，再提交。此后团队约定：提交前先跑本工具，diff 只显示真正的内容变更，仓库体积从 280MB 降到 190MB，代码审查效率翻倍。
CDN 回源带宽压降
运维小赵发现 CDN 回源带宽持续偏高，分析日志发现大量 HTML 文件未经压缩直接回源。他写了个脚本，在 CI/CD 构建步骤中自动调用本工具——先通过属性优化把 type="text/javascript" 简化为空属性、移除默认 async/defer 冗余声明，再压缩空白。上线后 HTML 平均体积从 32KB 降到 14KB，回源带宽从 120Mbps 降至 55Mbps，每月节省 CDN 费用约 2300 元。
第二节
使用指南
Getting Started使用步骤
- 1将 HTML 代码粘贴到左侧编辑区，右侧预览窗同步显示压缩后的结果与体积变化
- 2勾选「移除注释」「移除空白」「优化属性」开关，每项开关后实时更新预览与压缩率
- 3点击「复制结果」按钮将压缩后的 HTML 存入剪贴板，或点击「下载文件」保存为 .html 文件
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| <html><head><title>Test</title></head><body><p>Hello</p></body></html> | <html><head><title>Test</title></head><body><p>Hello</p></body></html> | 常规：无多余空白/注释的干净 HTML，压缩后不变，验证工具对基础结构的无损处理 |
| <div> <span> 内容 </span> </div> | <div><span> 内容 </span></div> | 常规：移除标签间空白和换行，但保留元素内文本空格（如' 内容 '），验证空白处理粒度 |
| <!-- 注释 --><p>正文</p><!-- 尾部注释 --> | <p>正文</p> | 边界：注释全部移除，包括头部和尾部，验证注释剥离的完整性 |
| <input type="text" disabled="disabled"> | <input type="text" disabled> | 边界：布尔属性优化，disabled="disabled" 简化为 disabled，验证属性值压缩 |
| <img src="a.jpg" alt=""> | <img src="a.jpg" alt=""> | 易错：空属性值 alt="" 不会被移除（语义保留），与某些工具粗暴删除不同，需注意 |
| <script> var x = 1; </script> | <script> var x = 1; </script> | 易错：<script> 标签内空白默认保留（避免破坏 JS 语法），与普通 HTML 空白处理规则不同 |
| <p> hello world </p> | <p> hello world </p> | 边界：元素内连续空格（非标签间空白）保留，验证工具不压缩文本内容中的空格 |
常见错误对照
1.未勾选「移除注释」选项，导致压缩后仍有 HTML 注释
✗ 错误
<!-- 这是页面统计代码 --><div>内容</div>✓ 修复
<div>内容</div>HTML 注释 <!-- --> 不会被默认移除，需手动启用「移除注释」开关。注释在压缩后无意义，且增加字节数。
2.保留空行或缩进，误以为压缩会移除所有空白
✗ 错误
<div>
<p>文本</p>
</div>✓ 修复
<div><p>文本</p></div>压缩工具默认只移除标签间的多余空白（空格、换行、制表符），但不会移除标签内属性值或文本内容中的空格。
3.属性值用单引号而非双引号，导致压缩后属性值被截断
✗ 错误
<img src='photo.jpg' alt='图片'>✓ 修复
<img src="photo.jpg" alt="图片">HTML 规范允许单引号，但压缩工具对属性值优化时可能只处理双引号包裹的值，单引号可能被错误解析为属性结束。
4.未闭合的标签导致压缩后结构错乱
✗ 错误
<div><p>内容</div>✓ 修复
<div><p>内容</p></div>压缩工具不会自动补全标签，未闭合的标签在压缩后仍然不完整，可能导致浏览器解析异常或样式失效。
5.在 <style> 或 <script> 标签内使用 HTML 注释，被错误移除
✗ 错误
<script><!-- var x = 1; //--></script>✓ 修复
<script>var x = 1;</script>压缩工具按 HTML 注释规则移除 <!-- -->，但 <script> 内的注释是 JavaScript 语法，移除后可能破坏脚本逻辑。
6.压缩后未检查 CDATA 段，导致 XML 嵌入内容被破坏
✗ 错误
<script><![CDATA[ if (a < b) ]]></script>✓ 修复
<script>if (a < b)</script>CDATA 段用于包含特殊字符，压缩工具可能移除 CDATA 标记或破坏其内容，导致 XHTML 或 SVG 嵌入脚本报错。
7.属性值中包含空格但未加引号，压缩后属性值被拆分
✗ 错误
<div class=container main>✓ 修复
<div class="container main">HTML 规范中属性值若含空格必须加引号，否则压缩工具会将其解析为两个属性，导致样式或脚本失效。
第三节
工作原理
How It Works核心公式
压缩比 = 1 - (压缩后大小 ÷ 原始大小)
变量说明
压缩后大小字节数，压缩后文件体积原始大小字节数，压缩前文件体积
示例
原始 HTML 文件 10240 字节，压缩后 7168 字节：压缩比 = 1 - (7168 ÷ 10240) = 1 - 0.7 = 0.3，即体积减少 30%。
用户输入
本地处理（浏览器内）
输出结果
第五节
常见问题
Q & A问我把压缩后的代码复制到编辑器里，格式全乱了，怎么恢复？＋
答
压缩后的代码所有换行和缩进都被去掉了，粘贴到编辑器会变成一行。这不是工具的问题，是压缩的正常结果。如果需要保留可读性，建议用编辑器自带的格式化功能（VS Code 按 Shift+Alt+F）重新排版，或者只压缩生产环境的文件，开发时保留原始代码。
问这个工具压缩 HTML 会删掉我的 <script> 标签里的内容吗？＋
答
不会删除任何标签内容。压缩只移除 HTML 中的多余空白字符（空格、换行、制表符）和注释（<!-- -->），以及优化属性写法（如把 selected="selected" 简化为 selected）。<script> 和 <style> 里的代码不会被改动或删除，只会去除它们外部的空白。
问为什么我压缩完文件大小反而变大了？＋
答
通常有两种情况。一是原始文件已经很小（< 1KB），压缩节省的空间不如额外处理开销，但这种情况极少。二是原始文件里几乎没有多余空格和注释，压缩效果不明显。如果文件本身已经是精简过的（比如从构建工具输出），再压缩收益很小。可以对比压缩前后的字节数看实际节省量。
问压缩后页面功能出问题了，是不是工具把我的代码弄坏了？＋
答
大概率不是工具的问题，而是原始代码中存在依赖空白符的写法。比如某些 CSS 选择器或 JavaScript 字符串拼接依赖了换行或空格。压缩后这些空白被移除，导致布局错乱或脚本报错。建议先检查代码中是否有类似 "\n" 或 .trim() 的使用；如果确认有，可以用更保守的压缩配置，或只压缩生产环境并做好回退。
问这个工具和那些在线压缩工具比，有什么不一样？＋
答
本工具完全在浏览器本地执行（FE 实现），代码不会上传到任何服务器，适合处理敏感或内部项目代码。在线工具很多也是前端压缩，但部分会将代码发送到后端处理，存在隐私风险。另外本工具对 HTML 属性做了优化（如布尔属性缩写），而一些工具只做空白和注释移除。速度上两者差不多，都是毫秒级。
问我压缩了一个 5MB 的 HTML 文件，浏览器卡死了，怎么办？＋
答
前端压缩受浏览器内存限制，5MB 的 HTML 文件可能超出大部分浏览器的安全处理上限。建议分块处理：把大文件拆成多个小文件分别压缩，或者改用 Node.js 的 html-minifier 命令行工具在本地处理。本工具更适合压缩单页面或模板文件（通常 < 500KB），大文件建议用后端方案。
问压缩后注释全没了，我想保留一部分注释怎么办？＋
答
当前工具默认移除所有 HTML 注释（<!-- -->），不支持选择性保留。如果需要保留特定注释（如版权声明或调试标记），建议压缩前手动将需要保留的注释改为其他形式，比如用 <span style="display:none"> 或放在 <script> 的字符串里。或者压缩后手动把关键注释加回去。
问这个工具能压缩 CSS 和 JS 吗？还是只能压 HTML？＋
答
只能压缩 HTML 本身，不会处理内联的 CSS 和 JavaScript 内容。工具只移除 HTML 层面的空白、注释和优化属性，不会改写 <style> 和 <script> 内部的代码。如果需要同时压缩 CSS 和 JS，建议用其他专门的压缩工具分别处理，或者使用构建工具（如 webpack、Gulp）整合流程。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。