📦 HTML / CSS / JavaScript 压缩
压缩或美化 HTML、CSS 和 JavaScript。删除注释、压缩空白、显示节省大小。
完全免费
无需注册
浏览器内完成
5 种语言
深色模式
📖 常见的坑
删除 HTML / CSS / JavaScript 中的空白与注释以压缩体积（也可反向格式化）。全部在浏览器内处理。它不能替代生产构建流程：这里只做词法层面的压缩，不包含 terser 或 esbuild 的变量名压缩、死代码消除与 Tree Shaking。适合一次性压缩手边的片段，或把不可读的代码还原为可读形式。
| 情形 | 会发生什么 | 怎么处理 |
|---|---|---|
| JavaScript 被压坏了 | 原因几乎都是省略了分号。原本依赖换行来分隔语句的代码，去掉换行后就会与下一行连成一条语句。JavaScript 的自动分号插入依赖换行位置，因此删掉换行的瞬间语义就变了。反过来，在 return 之后立即换行的代码，若保留该换行反而会出错。 |
压缩前请先用 Prettier 之类格式化并补齐分号，之后再压缩，并且务必运行验证结果。另外，压缩后的代码抛出异常时，没有 Source Map 就读不懂堆栈。生产代码请在构建阶段连同 Source Map 一起生成，而不是在这里。 |
| 压缩 HTML 后文字挤在一起 | HTML 中的空白有时是有意义的。<span>A</span> 与 <span>B</span> 之间的一个空格会渲染为词间距，删掉就变成 AB。用 inline-block 横向排列的布局，有时也依赖这个空格。 |
原则上，只压缩块级元素之间的空白，保留行内元素之间的空白。<pre> 与 <textarea> 的内容绝对不要动（其中的换行与缩进会被原样显示）。若嫌判断麻烦，不如放弃压缩 HTML，交给 gzip / Brotli——它们节省的传输量大得多，而且没有风险。 |
| 压缩 CSS 后部分样式失效 | 最典型的是针对旧浏览器的 hack 被清除。*zoom、_height、!ie、/*\*/ 这类写法是刻意的语法错误，用于只让特定浏览器读到，正确处理后自然会消失。此外 content: "\f101" 这类图标字体转义，以及 @media 内的空白，也可能因实现不同而出错。 |
压缩后的 CSS 上线前，请务必在真实页面上确认一次。若其中仍留有针对 IE 的 hack，多半早已无用，趁此机会主动删除更健康。长远来看，在构建中引入 PostCSS + cssnano 更安全，还能顺带处理厂商前缀与合并重复规则。 |
不要高估压缩带来的收益。文本无论如何都会以 gzip 或 Brotli 压缩后传输。删空白看似减少了 30%，压缩之后的差距通常缩到几个百分点——压缩算法擅长重复模式，而连续空白正是它的强项。真正决定加载速度的，是请求文件的数量、图片的体积、是否存在阻塞渲染的资源，其影响要大上一个数量级。
📖 使用方法
-
1
选择语言和操作选择自动检测、HTML、CSS 或 JavaScript,然后选择压缩或美化。
-
2
输入代码将代码粘贴到左侧输入框。点击示例按钮查看示例代码。
-
3
查看节省大小并复制显示压缩结果和节省大小。点击复制按钮将结果复制到剪贴板。
❓ 常见问题
压缩会改变代码行为吗？
正确操作不会改变行为。本工具仅删除注释和压缩空白，不重命名变量。
CSS 的 calc() 和 var() 能正确处理吗？
是的。CSS 压缩器安全地压缩属性值中的空白。
美化时可以更改缩进大小吗？
是的。使用缩进选项可选择 2 个空格、4 个空格或制表符。
🐛 此工具出现问题了吗？
免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。
✅
感谢您的反馈！
已送达运营者,将用于改进工具。