您的位置：首页 > Web前端 > JavaScript

Google Closure Compiler --js压缩优化

2011-06-11 13:47 274 查看
前不久，Google发布了一系列与WEB开发相关的工具，包括Closure Compiler、Closure Library与Closure Templates，其中Closure Compiler被Google称之为Javascript 优化器（Javascript Optimizer）。通过编译，Compiler可以使代码获得更佳的紧凑性和更高的性能。它不仅能删除无用的代码，同时还会重写和压缩代码以获得更好的下载和运行速度。此外，它还能检查代码中的语法、变量引用以及变量类型，并在发现问题后给出警告。

Compiler对代码的压缩优化包括三个级别：

WHITESPACE_ONLY 仅仅删除代码中的空白符以及注释

SIMPLE_OPTIMIZATIONS 在第一级的基础上重命名局部变量，经过这个级别的优化，代码的体积往往可以减少很多，并且并不会影响被压缩脚本与其他脚本的交互。

ADVANCED_OPTIMIZATIONS 最高级别的压缩优化，除了1、2级的一些常规策略外还会采取一些非常规策略来实现压缩的最大化。不过需要注意的是，如果是代码库则需要慎用这个级别的压缩，因为它会替换所有的变量名，除非使用这里介绍的方式来处理

对于脚本压缩和优化，我最感兴趣的是它所遵循的一些规则，通过查看源码不难发现，这些规则都是作为独立的Class来实现的，具体位于源码目录下的 com/google/javascript/jscomp，其中程序入口位于CompilerRunner.java中，真正的解析是在 Compiler.java中实现的。在Compiler.java中的optimize方法中，依次列出了各种优化规则，摘出部分罗列如下：

规则示例描述
删除注释、空白符--
内联简单函数
压缩前 function Test(a,b){ return a + b}; var sum = Test(document.x,document.y); alert(sum); 压缩后 alert(document.x+document.y);

会根据函数的复杂程度以及函数调用次数来决定是否内联处理
变量替换以及表达式计算
压缩前 var week = document.offsetHeight; var a = 3600*24*week; alert(a); function MyFun(a,b){ if( a+b > 5 ) return 'GT 5'; else return 'LTE 5'; } alert(MyFun(1,2)); 压缩后 alert(86400*document.offsetHeight); alert("LTE 5");

-
删除未引用对象（函数、变量、语句等）
压缩前 //未有效引用的变量 var unusedGlobalVar = 'Hello World!'; //未有效引用的函数 function UnUsedFun(){ alert(unusedGlobalVar); } function MyFun(timeout){ setTimeout(function(){ alert('timeout'); },timeout); //多余的return return; } var rlt = MyFun(1000); document.title = rlt; 压缩后 function a(b){setTimeout( function(){alert("timeout")},b)} var c=a(1000);document.title=c;

-
if语句替换为三目运算
压缩前 function MyFun(a,b){ if( a+b > 5 ) return 'GT 5'; else return 'LTE 5'; } alert(MyFun(window.a,window.b)); if( window.test ) alert('hello'); 压缩后 alert(window.a+window.b>5? "GT 5":"LTE 5");window.test&&alert("hello");

-
常量内联
压缩前 var A = "Hello world!"; var el = document.createElement_x('p'); p.innerHTML = A; 压缩后 document.createElement_x("p"); p.innerHTML="Hello world!";

-
删除不会执行到的代码片段
压缩前 if( false ) alert('Me'); else alert('He'); 压缩后 alert("He");

-
简化变量申明
压缩前 var var1 = 1; var var2 = 2; var var3 = 3; alert(var1 + var2 + var3); 压缩后 var var1=1,var2=2,var3=3;alert(var1+var2+var3); 如果赋值相同则会变成 var var1=var2=var3=1;

-
属性读取方式优化
压缩前 a['b]=1; 压缩后 a.b=1;

如果引号中属性名包含’-'等特殊字符则不会处理
匿名函数处理
压缩前 var hello = function(name) { alert('Hello, ' + name); } hello('New user'); 压缩后 function hello(a){alert("Hello, "+a)} hello("New user");

-
删除try/catch
压缩前 try { function f() { return 1;} var g = f; } catch(e) {} 压缩后 var g=f;function f(){return 1};

-
prototype 简写
压缩前 function B() { ... } B.prototype.foo = function() { ... } B.prototype.bar = function() { ... }

如果有多个给prototype添加属性的语句，则会将prototype进行简写处理
变量重用
压缩前 function print(x){alert(x);}; var x = 1; print(x); var y = 2; print(y); 压缩后 function print(x){alert(x);}; var x = 1; print(x); x = 2; print(x);

可以减少代码长度、更好的gzip压缩效果
无关联的属性名称替换成相同的变量名
压缩前 Foo.fooprop = 0; Foo.fooprop2 = 0; Bar.barprop = 0; 压缩后 Foo.a = 0; Foo.b = 0; Bar.a = 0;

可以使更多的变量获得更短的名字，提高压缩效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航