跳到主内容
UniKit

HTML 压缩

去除 HTML 注释与多余空白、省略可选闭合标签、压缩内联 CSS/JS，保留 pre/textarea/script/style 内容，并给出压缩前后体积与压缩率。

浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。

HTML 源码

压缩结果

<!DOCTYPE html><html><head><style>body{margin:0;padding:0}</style><body><div class="card"><p>Hello world<pre>  保留  空白  </pre></div><!--[if IE]><p>IE</p><![endif]--><script>const name = 'UniKit';
console.log(name);</script>

pre、textarea 的内容与脚本里的字符串、正则、模板串都会原样保留。

体积统计

压缩前395 字节
压缩后230 字节
节省165 字节
压缩率41.77%
移除注释1

这个工具能做什么

  • 上线前把模板里的注释、缩进和多余空格压掉，减少 HTML 体积、加快首屏解析。
  • 把内联 <style> 与 <script> 的注释和缩进一起压缩，适合邮件模板、嵌入片段这类不方便外链资源的场景。
  • 对比压缩前后字节数，评估「去掉注释 + 折叠空白」到底能省多少，用数据决定要不要上构建期压缩。
  • 排查渲染差异：用「不折叠空白」开关分别压一次，就能看出某个间距到底是 HTML 空白还是 CSS 造成的。

示例

输入

<div class="card">
  <p>Hello   <b>UniKit</b></p>
  <!-- 注释会被删掉 -->
  <pre>  a  
  b </pre>
</div>

输出

<div class="card"><p>Hello <b>UniKit</b> <pre>  a  
  b </pre></div>

110 字节压到 68 字节（省 42 字节，压缩率 38.18%，移除注释 1 条）。注意 <pre> 里的两个空格和换行被完整保留，而 </p> 这类可省略的闭合标签被丢掉了。

常见问题

压缩后布局会不会变？

默认设置下块级元素之间的空白被删掉、行内元素之间的多个空格折叠成一个，视觉上不会变。唯一的风险是「行内元素之间的换行」：如果原来靠换行产生一个空格（比如两个 <span> 之间），折叠后仍会保留一个空格，不会粘在一起。

pre 和 textarea 里的内容会被改吗？

不会。<pre> 与 <textarea> 内部是空白敏感区域，工具进入这些标签后会跳过空白折叠，原文的空格与换行原样保留；<script>、<style> 里的字符串、正则和模板串也不会被改动。

<!--[if IE]> 条件注释为什么没被删掉？

因为「保留条件注释」默认是开着的，这类注释在老模板里还承担着给特定浏览器输出内容的作用。想彻底删干净，把「去掉注释」和「保留条件注释」两个开关一起调整即可。

去掉 </p>、</li> 这类闭合标签安全吗？

安全。HTML5 规范允许省略一部分闭合标签（p、li、dt、dd、option、tr、td、th、thead 等），浏览器会按规范自动闭合。工具只处理这份安全子集，不会删掉 </div> 这种不能省的标签。

压缩 JS 会破坏代码吗？

不会。JS 压缩只删注释、折叠缩进，并保留换行以维持自动分号插入（ASI）语义，字符串、模板串和正则字面量整段复制。它不会做变量重命名或死代码消除，要那种效果请用专门的打包器。

关键词：html 压缩minify htmlhtml minifier压缩代码空白折叠whitespacegzip 前处理

同类工具

CSS 动画演示与生成开发工具Babel 配置生成器开发工具基准测试数据整理开发工具CSS 阴影生成器开发工具chmod 权限计算器开发工具CSS clip-path 生成器开发工具