JS压缩谁最强?对比5款JS代码压缩工具

JS压缩谁最强?对比5款JS代码压缩工具

JS压缩,似乎是很简单的一个事情,通常在线就可以完成。但不同网站或工具提供的JS压缩,效果差异不小。

本文,测试国内外5个JS在线压缩工具,看看谁的效果最好。

测试用JS代码

(注:这段代码来下面要测试的JShaman网站,以压缩这段代码为例,看不同的工具压缩后代码大小,以验证其压缩率):

javascript 复制代码
//1、去除未使用的函数、变量
var var_one = 1;
var var_two = 2;
function fun_one(){
var function_one_var_one;
console.log(var_one);
}
function fun_two(){
console.log(var_one);
}
fun_one();
{
function fun_three(){
console.log("function three");
}
}
//2、去除空行代码
;;;
//3、优化if、三元运算
if(1==1){
console.log("1=1");
} else {
console.log("1!=1");
}
2==2?console.log("2=2"):console.log("2!=2");
//4、变量使用转化为字符串直接引用
var four_one = 4;
var four_two;
var four_three ="this is four_three";
four_two = 5;
console.log(four_one,four_two,four_three,four_three);
//5、字符串拼接
var five_one = 1 + 2 + 3;
var five_two = "I am " + "a " + "bird";
console.log(five_one,five_two);

这段代码的压缩前体积是:674 Bytes

1、JShaman JS压缩

压缩后体积:207 Bytes,如下图:

2、minify-js JS压缩

压缩后体积:394 Bytes

3、toptal JS压缩

压缩后体积:392 Bytes,如下图:

4、JSCompress

压缩后体积:383 Bytes

5、未知品牌工具(众多)

压缩后体积:498 Bytes

总结:在这5款工具中,JShaman表现最好,674字节的代码压缩后是207字节,压缩率惊人。minify-js、JSCompress、toptal大体在390字节,表现中等。第五款未具名的工具,压缩后体积还有近500字节,最差。

其实这也就是专业工具与业余工具的差别。JShaman是专业工具中的代表,具有无效代码清除、代码逻辑优化、变量名变短等功能,而且各功能都有开关,可供使用者自由选用。如下图:

可能有的开发者会说:怎么不见 UglifyJS?

确实 UglifyJS是国外有名的JS代码压缩工具,多在开发环境或命令行中使用。如下图:

而且,在本文测试的jscompress,但同时使用了 UglifyJS 3 和babel-minify ,所以未将其单独列出,如下图:

测试jscompress等于同时测试了UglifyJS 3 和babel-minify。

补充(应该众多网友反馈,补充了UglifyJS 压缩效果),如下图:

压缩后体积:394 bytes

最后一类(第5种)无品牌的工具,仅仅是去除了代码中的回车换行、注释,并未对代码进行有效果的压缩。如下图:

通过本测试可知,专业的JS压缩工具,可对JS代码进行优化、重构,可很大程度上压缩代码体积。

测评建议:市面上的JS压缩工具很多,质量参差不齐,进行JS压缩,请选用专业工具。

相关推荐
__zRainy__几秒前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.38 分钟前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~2 小时前
CSS元素显示模式(display)
前端·css
AI大模型-小华2 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子5 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅5 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni5 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
卷福同学6 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端
赵庆明老师7 小时前
Vben精讲:21-详解web-antd:tsconfig.json
前端·json·vim