Google Closure Compiler高级压缩混淆Javascript代码

卢文博
2023-12-01

 

一、背景

前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件。

如今主流的Js代码压缩工具主要有:

1)Uglify http://lisperator.net/uglifyjs/
2)YUI Compressor http://developer.yahoo.com/yui/compressor/
3)Google Closure Compiler https://developers.google.com/closure/compiler/

自从jQuery等流行库使用Uglify作为压缩工具,Uglify慢慢流行起来,如今也是很多开发工具(框架)默认使用的Js压缩工具,比如百度的Fis以及绝大部分的Yeoman脚手架等。YUI Compressor也逐渐被Uglify所替代。

Uglify的压缩策略较为安全,所以不会对源代码进行大幅度的改造,压缩相对较为保守。所以将通过Uglify压缩后的代码格式化之后,还是大致能看明白。

而Google Closure Compiler(以下简称GCC)的高级压缩则是完全重新改造JS代码,去除代码中一些可以直接输出运行结果的逻辑,去除根根本不会执行到的JS代码,从而压缩效率会更高。

 

二、GCC三种压缩模式

GCC提供三种压缩模式:

1)Whitespace only

2)Simple

3)Advanced

我们以这段简单的代码为例

function sayHello(name) {
  alert('Hello, ' + name);
}
sayHello('binnng');

分别使用这三种压缩模式进行压缩:

Whitespace only

function sayHello(name){alert("Hello, "+name)}sayHello("binnng");

发现只是简单的去除空格换行注释。

Simple

function sayHello(a){alert("Hello, "+a)}sayHello("binnng");

Whitespace only要高端一点,在其基础上,还对局部变量的变量名进行缩短。这也是其他压缩工具所使用的压缩方式,如Uglify等,也是最为主流的压缩方式。比较安全。

Advanced

alert("Hello, binnng");

会发现,Advanced级别的压缩改变(破坏)了原有代码结构,直接输出了代码最终运行结果,可见的确是分析重写破坏,但是对代码压缩做到了极致,极大的减少了代码量。

注意的地方

正因为GCC是这样的破坏性压缩工具,所以使用起来得异常小心,稍微不规范可能就会引起压缩报错或者压缩成功后却不能正常运行。那么,如果要使用Advanced级别压缩,要注意哪些呢?

以下所有未指名级别的GCC压缩均为Advanced级别。

GCC会对变量的属性名也进行压缩

var data = {
  user: "binnng",
  age: "18"
};

if ("user" in data) {
  alert(data.age);
}


//经过Uglify压缩:
var data={user:"binnng",age:"18"};"user"in data&&alert(data.age);

//经过GCC压缩:
var a={b:"binnng",a:"18"};"user"in a&&alert(a.a);

会发现GCC压缩时,将变量的属性名也缩短,代码量减少了,但是却带来了问题,会发现以上GCC压缩后的代码运行其实是不正确的。因为属性名缩短改变后,data已经不再拥有名为user的属性了。

那如何解决呢?

var data = {
  user: "binnng",
  age: "18"
};

if (data.user) {
  alert(data.age);
}


//GCC压缩:
alert("18");

直接输出了正确的结果。

如果不想让GCC压缩属性名,比如在Ajax请求发送给后端接口的时候,可以将属性名用双引号包裹:

var data = {
  "user": "binnng",
  "age": "18"
};

var ajax = function(url, data, callback) {
  (new window.XMLHttpRequest()).send(data);
  // ...
}; 

ajax("//baidu.com", data, function(res) {console.log(res)});


//GCC压缩后:
(new window.XMLHttpRequest).send({user:"binnng",age:"18"});

原封不动的保留了后端需要的参数名。

全局变量要显式挂载在window下

var foo = "1234";
alert(widnow.foo);
//经过GCC压缩后:

alert(window.a);

有点莫名其妙。。因为在GCC中,不再认可隐式全局变量,所以上面的代码中在GCC眼里,foo是没有挂载到window下的,所以下文的window.foo其实是未定义的。

要解决这个问题,必须将foo显式挂载到window下:

window.foo = "1234";
alert(widnow.foo);
//这样经过压缩后:

window.a="1234";alert(widnow.a);

这时候可能就会疑问,为何不直接压缩成alert("1234")呢?这是因为GCC不会去除挂载在window下的变量

必要时导出变量函数等

window.btnClick = function() {
  alert("clicked");
};
//以上的代码经过压缩后成为:

window.a=function(){alert("clicked")};

此时,如果HTML中存在如下代码,就会报错。

<a οnclick="btnClick()">点我</a>
//这时候就需要导出函数:

window["btnClick"] = function() {
  alert("clicked");
};

用双引号包裹后,btnClick就保留了下来。在构造函数中,尤其需要注意导出,例如:

var Animal = function(name) {
  this.name = name;
};
Animal.prototype.eat = function() {
  alert(this.name + " is eating!");
};

以上的代码经过GCC压缩后,什么都没剩下,因为GCC认为,代码中的代码都没有执行,属于dead code。既然这么写了,那肯定是需要它,提供给别人外部调用什么的,这时候就需要这么导出:

var Animal = function(name) {
  this.name = name;
};
Animal.prototype.eat = function() {
  alert(this.name + " is eating!");
};

window["Animal"] = Animal;
Animal.prototype["eat"]= Animal.prototype.eat;
//经过压缩后:

function a(b){this.name=b}a.prototype.a=function(){alert(this.name+" is eating!")};window.Animal=a;a.prototype.eat=a.prototype.a;

这时候,Animal这个方法成功的保留了下来。

还有,在使用JSONP方式获取服务端数据的时候,也一定要导出callback方法名:

var jsonpCb = function() {
  //...
};

getScript("/api/data?callback=jsonpCb");

// 导出,否则jsonpCb会被压缩掉不能被识别
window["jsonpCb"] = jsonpCb;

所有业务代码合并压缩

a.js

var getName = function() {return "binnng"};
b.js

alert(getName());

如果单独压缩a.jsb.js就会出问题,结果会是a.js中什么都没有,b.jsgetName方法未定义(undefined)。正确的做法则是,两者合并再进行压缩。

 

三、GCC三种运行方式

1)、”Closure Compiler Service UI”:GCC提供的在线压缩方式,只需导入文件路径或是直接复制粘贴文件内容,即可实现压缩。在线压缩网站为:http://closure-compiler.appspot.com/home详细步骤如下:

      A.打开页面,在”Add a URL”文本框中输入文件路径,然后点击”add”。或者直接把文件内容复制到下边的文件域中。

      B.在”Optimization”中选择压缩模式,默认为”Simple”模式。

      C.点击”Compile”按钮,进行压缩。如图,右侧这显示压缩完的文件信息。

      D.可以选择复制下面的文本内容粘贴到压缩前原文件,或者右键点击”default.js”-->”链接另存为”,直接将压缩完的文件重命名并保存到本地。

      2)、”Closure Compiler Service API”:通过自定义HTML页面发送请求的方式来获取压缩文件。与”Closure Compiler Service UI”相比,它可以建立自己的工具,创建自己的工作流。而”Closure Compiler Service UI”只适合压缩少量的代码和文件。详细步骤如下:

      A.创建一个名为”closure_compiler_test.html”的HTML页面,用于发送post请求。代码如下:

<html>

  <body>

    <form action="http://closure-compiler.appspot.com/compile" method="POST">

    <p>Type JavaScript code to optimize here:</p>

    <textarea name="js_code" cols="50" rows="5">

    function hello(name) {

      // Greets the user

      alert('Hello, ' + name);

    }

    hello('New user');

    </textarea>

    <input type="hidden" name="compilation_level" value="WHITESPACE_ONLY">

    <input type="hidden" name="output_format" value="text">

    <input type="hidden" name="output_info" value="compiled_code">

    <br><br>

    <input type="submit" value="Optimize">

    </form>

  </body>

</html>

     B.用浏览器打开该HTML文件,点击”Optimize”按钮提交,并会返回压缩后文件。然后复制粘贴保存。

     注意:每个请求至少必须发送以下参数:

a.”js_code”或”code_url”:这个参数的值指示要编译的JavaScript。必须至少包含其中一个参数,并且可以同时包括。”js_code”必须是包含javascript的字符串。”code_url”必须是包含js文件的url地址。

b.”compilation_level”:这个参数表示文件压缩的模式,有三个值,分别为”whitespace_only”,”simple_optimizations”,”advanced_optimizations”。上文用的是”whitespace_only”,默认为”simple_optimizations”。

c.”output_info”:此参数的值指示要从编译器获取的信息类型。有四个值,分别为”compiled_code”,”warnings”,”errors”,”statistics”。上文用的是”compiled_code”,返回的是压缩好的文件。

d.”output_format”:此参数表示输出的格式。有三个值,分别为”text”,”json”,”xml”,默认为”text”。

    更多关于API的使用请参照官网。

      3)、”Closure Compiler Application”:用官网提供的客户端进行代码压缩。从官网下载压缩包,地址为:https://dl.google.com/closure-compiler/compiler-latest.zip。本客户端是在Java环境下运行的,所以下载之前应安装JDK。安装JDK步骤参考:http://jingyan.baidu.com/article/2d5afd6993a6db85a2e28e9f.html

      详细步骤如下:

      A.创建一个名为”closure-compiler”的文件夹。

      B.把下载的压缩包解压到”closure-compiler”下。

      C.把要压缩的js文件也放到当前目录下。

      D.用命令窗口打开文件夹中”README.md”文件。打开如下

      

系统会自动进入到当前文件位置。如果没有打开,可以尝试如下做法:

      a.按”windows+r”键,进入“运行”,输入”cmd”,进入命令窗口。

      b.然后输入刚刚创建的”closure-compiler”文件夹的路径。例:”F:\workspace\closure-compiler”,则如下:

     E.然后输入”java -jar 目录下.jar文件--js 目录下.js文件--js_output_file 压缩完保存的文件名”,例:”java -jar closure-compiler-v20161201.jar --js setting.js --js_output_file setting.min.js”,生成的文件也会保存在当前的目录下(closure-compiler文件夹)。生成的文件的压缩模式默认为”SIMPLE”,如果要改变其他的压缩模式,在上边的的语句中添加”--compilation_level=ADVANCED”,值可以为”WHITESPACE_ONLY”,”SIMPLE”,”ADVANCED”。

     

如果想了解更多使用方法,请输入”java -jar closure-compiler-v20161201.jar --help”。

 

四、结语

GCC的高级压缩(Advanced)非常强大,对代码压缩做到了极致,但是其对代码书写要求也比较严格,并且破坏性压缩也被很多开发者所诟病。

但是稍加注意,严格规范自身代码风格,了解GCC压缩方式原理,利用好GCC高级压缩,一定会大大减少JS的体积,从而大幅度的提升前端代码性能。

另外,GCC像其他压缩工具一样,也有GruntGulp构建组件,可以很方便的去使用它。

 

转载自:

  1)https://segmentfault.com/a/1190000002575760

  2)https://blog.csdn.net/nh18304030935hn/article/details/54571682

 

 

 

转载于:https://www.cnblogs.com/DDgougou/p/9355567.html

 类似资料: