JS压缩混淆工具-UglifyJS

JavaScript, 工具

最近写了一些JS的项目，顺便研究了下UglifyJS工具，它是一款JS代码处理工具，提供了压缩，混淆和代码规范化等功能，同时还支持命令行和NodeJS两种使用方式，在代码基本”格式化”功能的基础上，可自定义扩展一些功能选项，满足具体项目中的使用。在业界内，JQuery使用UglifyJS进行代码压缩混淆，可见其结果具备准确性和稳定性。

使用方式：uglifyjs [input files] [options]

SourceMap

UglifyJS支持使用/生成SourceMap, 那什么是SourceMap，简单来说就是一个解码表，JS代码从原生到压缩混淆之后，从原来的几百行甚至几千行中，压缩到几十行。不仅代码行数骤减，同时经过混淆，代码的变量声明都进行了替换，因此当我们看混淆之后的代码，很难读懂代码的本意，这也是压缩混淆的初衷，减少JS代码的大小，方便网络传输，理论上对代码进行了保护。利弊相对，压缩混淆之后的代码对调试来说尤为困难，因此SourceMap就出现了。

简单来讲，压缩混淆之后的代码通过SourceMap，即可还原成原始的JS代码，这就是为什么说它是一个解码表的原因，因为反向还原了JS代码，结合到UglifyJS而言，其支持以下几个选项：

  • source-map 指定生成一个SourceMap的文件名
  • source-map-root 指定SourceMap的根目录位置
  • source-map-url 指定SourceMap的网络路径
  • source-map-inline 在压缩混淆的JS代码后，追加SourceMap内容
  • in-source-map 指定一个SourceMap

功能：压缩

使用UglifyJS进行代码压缩，-c 选项即启用压缩，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
"use strict";
var net = require('net');

const IP = "127.0.0.1";
const PORT = 8887;

var client = new net.Socket();
client.connect(PORT, IP, function() {

    console.log('CONNECTED TO: ' + IP + ':' + PORT);
    client.write('I am Chuck Norris!');

});

压缩后变成

1
"use strict";var net=require("net");const IP="127.0.0.1",PORT=8887;var client=new net.Socket;client.connect(PORT,IP,function(){console.log("CONNECTED TO: "+IP+":"+PORT),client.write("I am Chuck Norris!")});

可以看出，压缩之后去掉了空行以及连续声明时候的关键字const，如果让你调试这样的出错代码，没有SourceMap，则无从下手

功能：混淆

使用UglifyJS进行代码混淆，-m 选项即启用混淆，例如，还是上面的代码，经过混淆后变成

1
"use strict";var c=require("net");const e="127.0.0.1";const n=8887;var o=new c.Socket;o.connect(n,e,function(){console.log("CONNECTED TO: "+e+":"+n);o.write("I am Chuck Norris!")});

可以看出，混淆把变量都替换成了单字符，相比于压缩，进一步的减小了代码量

总结

UglifyJS是一款出色的JS代码压缩，混淆工具，其具有丰富的功能，例如代码美化，支持NodeJS自定义编程等，更多细节请参考 UglifyJS

如需转载，请注明出处