首页 > 其他分享 >JS压缩谁最强?对比5款JS代码压缩工具

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

时间:2023-12-20 17:56:44浏览次数:30  
标签:压缩工具 压缩 JS four var 最强 console 代码

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

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

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

测试用JS代码

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

//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压缩,请选用专业工具。

标签:压缩工具,压缩,JS,four,var,最强,console,代码
From: https://www.cnblogs.com/jsjiami/p/17917142.html

相关文章

  • JS获取 URL 链接参数
    方法一源码:functionGetQueryString(name){varreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)");varr=window.location.search.substr(1).match(reg);if(r!=null)returnunescape(r[2]);returnnull;}使用:consol......
  • js 视频录制
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <body> <buttononclick="startRecording()">开始录像</button> <buttononclick="stopRecording(......
  • JS+CSS多行文本显示“更多”
    本代码展示最多显示3行,每行行高16px,3行总高48px,4行总高64px当文本行数大于3行,显示“更多”CSS:#CourseDesc{margin-top:5px;font-size:12px;position:relative;max-height:48px;line-height:16px;overflow:hidden;}#CourseDesc.temp{position:absolute;top......
  • js 处理对象数组 + map 筛选出指定字段数据 + filter过滤重复数据/指定数据
    constres=[{id:1,name:'zhangsan',age:16,gender:0},{id:1,name:'zhangsan',age:16,gender:0},{id:2,name:'lisi',age:20,gender:1}];获取res中的id和name/*[{"id&......
  • Koa.js 中的日志管理
    日志日志用来记录程序的运行信息。开发服务端程序,必须集成日志管理的功能,一旦系统出现故障可以及时排查问题所在。日志一般分为:访问日志:记录系统的访问记录。运行日志:输出系统运行时的一些信息错误日志:记录系统出错的状态一般我们都是通过nginx做负载均衡,它具备了记录访问日志的......
  • Newtonsoft.Json.JsonReaderException:“Bad JSON escape sequence: \*. Path '****'
    测试Json字符串msg:{"field1":"\\\9527\","field2":"\\\\\data\\","field3":"\r\n\\\G\\\d\\\","field4":"TESTTEST\\1TEST\\\GTEST\\\\GTEST2\\\\\TEST3\\......
  • js实现el-select选中的文本,一键复制
    <divclass="invite-buttom">请选择要复制的网站:<el-selectv-model="webValue"placeholder="请选择要复制的网站"><el-optionv-for="iteminformUrl.webInviteUrl"......
  • npmjs.com 网站
    npmjs.com提供了许多对日常开发非常有用的功能:包管理:你可以使用npm来安装、升级、卸载包。这些包可以是全局安装的,也可以是本地安装的。依赖控制:npm可以帮助你管理项目的依赖,使得代码部署变得更加容易。发布和维护包:如果你是一个开发者,npm也提供了命令行工具,让你......
  • 在Mapbox-gl-js中添加自定义图层
    在Mapbox-gl-js中添加自定义图层前言一、制作geojson地图二、使用Tippecanoe将geojson转换成vectortile(.pbf)文件三、使用mapbox-gl-js显示三、Mapbox-gl-js中根据矢量数据的属性过滤显示前言本文说明如何制作自定义的地图数据,并使用mapbox-gl-js进行显示一、制作geoj......
  • JsonNode、ObjectNode和ArrayNode
    我个人不喜欢fastjson,但是项目中很多地方用到json字符串转换对象但又不想创建pojo所以使用jackson的JsonNode、ObjectNode和ArrayNode就非常好用,万能对象,这三个对象是非常全面的,感兴趣的可以看下源码JsonNode只读,通常由ObjectMapper解析json字符串得到ObjectNode可修改,继承......