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

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

  • 7
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用compressorjs库来压缩图片。以下是使用compressorjs的基本步骤: 1. 首先,将compressorjs库添加到你的项目中。你可以通过在HTML文件中添加以下代码来引入库: ```html <script src="https://cdn.jsdelivr.net/npm/compressorjs@5.3.0/dist/compressor.min.js"></script> ``` 2. 创建一个HTML `<input>` 元素,用于选择要压缩的图片文件: ```html <input type="file" id="image-input"> ``` 3. 在JavaScript中,使用以下代码来处理所选图片文件的压缩: ```javascript const inputElement = document.getElementById("image-input"); inputElement.addEventListener("change", handleFileInputChange); function handleFileInputChange(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = function (e) { const image = new Image(); image.src = e.target.result; image.onload = function () { const compressedImage = Compressor(image, { quality: 0.6, // 设置压缩质量(0到1之间) maxWidth: 800, // 设置最大宽度 maxHeight: 800, // 设置最大高度 mimeType: "image/jpeg" // 设置输出的图像类型 }); // 处理压缩后的图像 // compressedImage 是一个 Blob 对象,可以进行上传或展示等操作 }; }; reader.readAsDataURL(file); } ``` 以上代码中,我们首先通过`FileReader`读取所选图片文件,并将其加载到`<img>`元素中。然后,我们使用compressorjs的`Compressor`函数对图像进行压缩,并在压缩完成后处理压缩后的图像。 你可以根据需要调整压缩的质量、最大宽度和最大高度,以及输出的图像类型。压缩后的图像将作为Blob对象提供,你可以根据实际需求进行进一步处理,比如上传到服务器或在页面上展示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值