</lylijincheng>

使用Closure Compiler工具优化JavaScript代码

概述

Closure compiler是一个JavaScript代码优化工具。它可以解析、分析你的JavaScript代码,对代码中存在的错误和警告给出提示和标准化的建议。它还能检查JavaScript语法,变量引用和类型,以及可能存在的潜在的问题。 它的好处是不仅可以压缩JavaScript文件大小,还能提高代码运行的效率,帮助你减少代码出现Bug的机会,提升可维护性。

使用方法

有三种方式使用Closure Compiler来优化代码

  • 在终端运行的Java程序
  • 一个简单的Web应用服务
  • 一套基于Restful的服务借口

终端运行的Java程序可以在Google developers网站下载,里面包含有一个compiler.jar的Java文件和说明文件。使用简单的命令即可编译

java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

此操作会将同目录下的hello.js文件编译,生成名为hello-compiled.js的文件。

Web应用服务是一个可视化的Web界面,可访问的地址为:http://closure-compiler.appspot.com。这种方式适用少量的JavaScript代码优化。在UI界面可以添加一个外部文件,也可以在下方的文本区域粘贴你的代码,有三种优化级别的选择(见下文),默认为简单优化,还能选择输出格式,点击“compile”即可在右边区域输出编译优化后的代码。输出的文件在服务器上保留一个小时,在此其间你可以方便引用优化有的文件,此外,只要你不改变被编译内容头部注释中的 @output_file_name参数(默认为default.js),在此一小时之内改变了要被优化的代码并且重新优化过一次,被引用的输出文件也会同时更新。

如果你要处理的是一个比较大型的系统,可能就需要考虑使用Closure Compiler提供的API服务了。使用服务接口最简单的方法是新建一个HTML文件,创建一个Form表单,将需要优化的代码和参数通过HTTP POST请求的方式发送,通过服务接口会返回优化后的代码。另外,可以写一段Python脚本,发送请求给Closure Compile服务,输出优化后的代码,携带的参数可以是js代码或外部js文件的URL。

优化级别

1. 空白优化(WHITESPACE_ONLY)

使用最基本的优化,仅去除代码中的空白和注释以及不必要的符号(分号、括号等)。

2. 简单优化(SIMPLE_OPTIMIZATIONS)

执行的操作除了空白优化,还会替换局部变量和函数形参,优化语句表达式和函数。简单优化会保留有效的JavaScript在语义上的功能。这一级别的优化不会干预编译后的代码和其他代码的相互关系。

3. 高级优化(ADVANCED_OPTIMIZATIONS)

高级优化通过对代码中的标记重命名,采取更积极的全局转换,对代码实现最高级别的压缩和优化。除简单优化外,高级优化会进一步的优化,包括

  • 重命名全局变量,函数名和对象的属性名
  • 去除模块中无用(不可达)的代码
  • 可能会执行函数体代替对简单函数的调用(内联化)

这一级别的优化需要额外的步骤确认编译后的代码和编译之前的功能一样。

示例

原始代码

function unusedFunction(note) {
  var noteText = note['text'];
  if (noteText) {
    alert(noteText);
  }
}

var displayNoteTitle = function(aLongLongLongNote) {
  alert(aLongLongLongNote['title']);
};

var flowerNote = new Object();
flowerNote['title'] = "Flowers";
displayNoteTitle(flowerNote);

空白优化(prettified)

function unusedFunction(note) {
  var noteText = note["text"];
  if (noteText) {
    alert(noteText);
  }
}
var displayNoteTitle = function(aLongLongLongNote) {
  alert(aLongLongLongNote["title"]);
};
var flowerNote = new Object;
flowerNote["title"] = "Flowers";
displayNoteTitle(flowerNote);

简单优化(prettified)

function unusedFunction(a) {
  (a = a.text) && alert(a);
}
var displayNoteTitle = function(a) {
  alert(a.title);
}, flowerNote = {title:"Flowers"};
displayNoteTitle(flowerNote);

高级优化(prettified)

alert("Flowers");

参考资料

https://developers.google.com/closure/compiler https://developers.google.com/closure/compiler/docs/api-tutorial3

Comments