HTML/CSS/JS 代码压缩

粘贴代码后,自动去除空格、换行和注释,减小文件体积。自动识别语言,并显示减小了多少。

功能

  • 去除 HTML、CSS、JavaScript 中的空格、换行和注释,减小文件体积。自动识别语言,也可以手动切换
  • 显示压缩前后的字节数、压缩率,以及 gzip 传输时的大小估计
  • 安全第一:HTML 的空白合并不作用于 pre、textarea、script、style 内部,元素之间默认保留一个空格,字符串和 calc() 里的空格也会保留
  • 使用广泛采用的开源库:JavaScript 用 terser,CSS 用 csso,HTML 用 html-minifier-terser
  • 语法错误会标出行号和列号,不会删除原来的代码。HTML 中的 script、style 有错误时只保留该部分不压缩
  • 支持复制、下载和打开文件(拖放)。代码不会上传

使用场景

想让网页加载更快一点

没有构建工具的小网站、落地页,在发布前把 HTML 和 CSS 压缩一下。

把代码贴到博客或 CMS 之前

把模板或小部件用的 CSS、JavaScript 压成一行。

想知道能减小多少

并排显示压缩前、压缩后和 gzip 后的大小,判断值不值得压缩。

检查代码有没有语法错误

JavaScript 和 CSS 会先解析语法再压缩,出错时会告诉你行号和列号。

隐私

粘贴的代码和打开的文件只在这台设备的浏览器中压缩,不会发送到任何地方。压缩用的组件(terser、csso、html-minifier-terser)在第一次使用时从本站加载。只保存设置(注释、空格、变量名等选项),保存在这台设备的浏览器里。

常见问题

压缩后网页的显示和功能会变吗?

只删除不影响显示和运行的空格、换行和注释。JavaScript 只缩短变量名,并做不改变行为的改写。HTML 的空白合并不作用于 pre、textarea、script、style 内部(打开“同时压缩其中的 <style> 和 <script>”时,script、style 会按 JavaScript、CSS 压缩),元素之间默认保留一个空格。不过,用 CSS 设置了 white-space: pre 等的元素里的空格会被合并。把这些部分放在两个 <!-- htmlmin:ignore --> 之间,就不会被改动。发布前请用压缩后的版本检查显示和功能。

提示有语法错误

会显示错误所在的行号和列号,原来的代码保持不变。请检查该位置附近是否有未闭合的括号、引号,或漏掉的逗号。HTML 中的 <script>、<style> 有错误时,只有该部分不压缩,其余部分照常压缩。不支持 CSS 嵌套(& 写法)和 @media (width >= 600px) 这样的范围写法,压缩会导致规则丢失,所以会作为错误停止。

“gzip 后(估计)”是什么?

大多数服务器会先用 gzip 等方式压缩文件再传输。这个数值接近实际传输的大小:浏览器用 CompressionStream 真的做一次 gzip 压缩并计算字节数。如果服务器使用 Brotli,传输量通常会更小。

是用什么方式压缩的?

使用广泛采用的开源库:JavaScript 用 terser,CSS 用 csso,HTML 用 html-minifier-terser。这些库放在本站,在你的浏览器里运行,代码不会离开你的设备。CSS 设置为不重新排序、不合并规则,以免改变规则的优先顺序。

压缩后的代码能还原吗?

删除的注释、换行和缩短的变量名无法还原。请务必保留原始文件,并在原始文件上修改。想把 JSON 压成一行,可以使用“JSON 格式化”。

最多能处理多大的代码?

可以打开 10MB 以内的文件。代码越大越耗时,几 MB 的 JavaScript 可能需要几秒到十几秒。

相关工具

语言

输入代码后会立即压缩。

也可以把文件拖到这个框里打开。代码只在这台设备上处理,不会上传。

压缩结果

压缩前
—
压缩后
—
压缩率
—
gzip 后(估计)
—

设置

<!--[if IE]> 这样的条件注释和以 <!--! 开头的注释会保留。

也包括 style 属性和 onclick 等属性。有语法错误的部分会原样保留。

默认在块级元素前后也保留一个空格。删除后,用 CSS 设为 inline-block 并排的 div 等之间的间距可能会变化。文字中 a、span、button 等行内元素之间的空格会改变显示,打开后也会保留。

只缩短函数内部的变量名,不改动外部使用的全局名称。

设置会保存在这台设备上。粘贴的代码不会保存。