代码压缩
去除注释与多余空白,显示压缩前后大小对比。
什么是代码压缩?
代码压缩(minify)是在不改变程序行为的前提下,删除代码中不影响执行的冗余内容:注释、多余空白、缩进、换行以及标点两侧的空格,从而减小文件体积,加快页面加载。生产环境的 JS 和 CSS 通常会先压缩再发布,这也是为什么线上源码难以阅读。
本工具采用状态机逐字符扫描:能够识别单引号、双引号、反引号字符串以及正则字面量,字符串内部的「//」「/*」不会被当作注释误删;对注释的处理分两种——JS 的 // 行注释与 /* */ 块注释、CSS 的 /* */ 注释都会被删除。JS 模式保留换行结构以兼容自动分号插入(ASI),例如 return 后换行的写法不会被破坏;CSS 模式则可以把整段样式收缩到更紧凑的形态。压缩完成后会显示原始大小、压缩后大小与节省比例,方便评估效果。
适用于:发布前减小前端资源体积、去掉日志中的冗余代码、快速生成可部署的压缩产物等场景。本工具是安全优先的「简单压缩」,不做变量名缩短等激进优化,压缩后建议运行一遍功能测试。
使用步骤
- 在下拉框选择代码类型:JavaScript 或 CSS;
- 把需要压缩的代码粘贴到输入框;
- 点击「压缩」,结果与大小对比会显示在下方;
- 点击「复制」获取压缩后的代码,并建议做一次功能验证。
常见问题
压缩会改变代码行为吗?
JS 模式只删除注释和行首尾空白、收缩标点两侧空格,并保留换行结构以兼容 JavaScript 的自动分号插入(ASI),不重命名变量、不合并语句,行为保持不变;CSS 模式同样只去注释与空白。
字符串和正则里的内容会被误删吗?
不会。处理时对字符串(单引号、双引号、反引号)与正则字面量做了状态识别,注释符号出现在字符串内部时不会被当作注释删除。
压缩率大概有多少?
取决于代码风格:带大量注释和缩进的代码通常能减少 30%-50%;本身已很紧凑的代码收益较小。结果框下方会显示压缩前后的字符数与节省比例。
为什么不把 JS 合并成一行?
合并成一行是更激进的压缩手段,但会破坏依赖换行的自动分号插入场景(如 return 后换行),可能导致行为变化。本工具以安全优先,保留换行结构,适合日常快速压缩与阅读。