跳到主要内容
PulsarKit

CSS/JS/HTML压缩

去掉样式表、脚本和网页里的注释、缩进和多余空白,过程安全,代码里的名称一个都不改。

把文件拖到这里

.css, .js, .mjs, .html, .htm, .txt · 最大20 MB

如何压缩代码

  1. 1

    拖入源文件

    最多添加二十个样式表、脚本或网页,每个最大20 MB。每个文件都在这个浏览器标签页里读取和处理。

  2. 2

    确认代码语言

    先看文件扩展名,再看内容本身。两者都判断不出来时,继续之前自己选择CSS、JavaScript或HTML。

  3. 3

    下载压缩后的文件

    每个结果都以.min文件的形式放在原文件旁边,批量处理的结果打包成一个ZIP。

先做词法分析,字符串仍是字符串

删掉任何一个字符之前,每个文件都会先被切分成真正的词法单元(token)。正因为这样,字符串里的注释符号不会把这一行截断,URL里的双斜杠不会吞掉一条规则,脚本里的尖括号注释开头也不会让代码块提前结束。简单粗暴地删空白,恰恰会在这些地方出错,而且出错时毫无提示。

有意义的换行会保留

在JavaScript里,换行有时就是分号。return后面跟换行,返回的是undefined;return后面跟空格,返回的是那个值,所以替换掉这个换行会改变代码的行为。语言依赖的换行原样保留。在HTML里,pre和textarea的内容逐字复制,条件注释也会保留:它们是标记,不是备注。

有意不做的事

不缩短变量名,也不生成source map。重命名局部变量需要在完整的解析器上做作用域分析,稍有差错就会在没有任何警告的情况下弄坏能正常运行的代码。这里省下的体积比完整的构建工具链要少,但每一处节省都是可以还原的。

代码不会上传

读取、解析和改写都在这个浏览器标签页里完成,没有服务器,没有队列,关闭标签页后也不保留副本。这对源文件很重要,因为源文件里经常有内部接口地址、关于未发布功能的注释,以及有人不小心留在配置里的密钥。

常见问题

压缩别人写的代码安全吗?

这里做的处理全都是删除语言本身会忽略的内容:注释、缩进和多余的空白。没有任何改写、重排或重命名,所以输出的行为和输入一样。不过还是要保留原文件,因为压缩后的文件是用来生成的,不是用来编辑的。

为什么变量名没有变?

缩短名称需要在完整的语言解析器之上做作用域分析,其中一个错误就可能悄悄改变别人生产环境代码的行为。这个功能没有实现,也没有假装实现了它的开关。结果是一种安全的压缩,效果比完整的打包工具弱,对比字节数之前最好知道这一点。

这和代码混淆是一回事吗?

不是。压缩去掉的是解析器不需要的字节,重新缩进之后逻辑依然可读。混淆则是故意让代码难以理解:重命名标识符、编码字符串、改写控制流。这里不会试图隐藏任何东西。

会生成source map吗?

不会生成source map。要把压缩后的位置对应回原始行号,需要在改写过程中跟踪每一个词法单元,这是构建工具的工作。调试时保留未压缩的文件,线上使用压缩后的文件。

能一次压缩多个文件吗?

每批最多二十个,代码语言按文件逐个判断,所以样式表、脚本和网页可以一起处理。有语法错误的文件会按文件名报告并跳过,不会取消其他文件。

文件有语法错误会怎么样?

你会得到出错的行和列,而不是结果。CSS块没有闭合,或者声明缺少值,这个文件就会被特意停下:输出一个被截断、看起来正常、直到上线才出问题的样式表,比一条错误信息更糟。

为什么文件几乎没变小?

它很可能已经压缩过了。输出和输入差不多大时,说明已经没有可删的内容,工具会直接告诉你,同时照样把文件交还给你,不会拦着你。

HTML里内嵌的样式和脚本也会压缩吗?

会。网页里的style和script代码块,用和独立文件相同的机制压缩,标签之间的空白合并为一个空格。某段内嵌脚本有错误,不会连累页面的其余部分;那一块保持原样。

相关工具