应用 closure compiler 高级模式

基础：

closure compiler (简记CC)是 google 去年推出的一款 javascript 压缩工具，取得了比老牌压缩工具 yui compressor (简记YC) 更高的压缩比，CC 相对于 YC 具备更多的语义分析 能力， 根据参数具备三个等级的压缩代码能力 ：

white-space-only : 只去除源码中的空格

simple-optimization : 对应于 YC 能力，对局部变量名字进行缩短。

advanced-optimization : CC 独有，这个等级会进行函数内联 ，变（常）量提取，执行流程优化等传统编译器前端所做的事情，而对于 javascript ，则会进行激进的属性名缩短，以及对象平坦化操作。这也是导致使用该级优化较少的主要原因。

具体 CC 与 YC 比较 可以见： YC VS CC By Lifesinger

 

实践：

 

近期整理 kissy editor 的核心代码，使用 CC 的高级模式编译后，比起简单模式效果显著：

 

 

 

高级模式 比起简单模式节省了17k，17.5% !

当然使用 CC 的高级模式是需要对代码进行一些调整的

1.尽可能多标注

由于 javascript 是一种弱类型语言，而CC 要全面优化的话不可避免需要知道一些类型信息，这些信息就只能通过标注（annotation）来传递给 CC，可以通过 @constructor 标志构造器，@type 标志变量类型，@param，@return 标志函数相关等等。

2.区分对象属性引用方式

javascript 对象属性有两种引用方式 : obj.propertyName 与 obj["propertyName "] ，语言规范来说是没有区别，但是 CC 在优化过程中会对 obj.propertyName 进行 变量名以及属性名缩短，例如：

obj.propertyName -> x.a

这样的话，当需要保持属性名不变，例如（外部引用或配置传入，读取），则要谨慎选择。

使用 obj["propertyName "] 也是 CC 推荐的暴露 (export) 外部api的方法 ，将实例以及构造器上的静态方法开放给外部程序调用。

 

Constructor["api"]=Constructor.api;
Constructor.prototype["api"]=Constructor.prototype.api;

 

也可参考CC建议 ，写个工具方法 extern :

 

/**
 * extern for closure compiler
 */

function extern(obj, cfg) {
    for (var i in cfg) {
        obj[i] = cfg[i];
    }
}


extern(Constructor, {
    "api1": Constructor.api,
    "api2": Constructor.ap2
})

 

 

 

 

3.申明外部类库

CC 推荐类库与应用整体编译，但是现实中往往可能类库本身都不能与 CC 兼容，这时就需要使用类似 C 头文件的类库申明文件，来告诉 CC 使用的类库api，防止对调用类库的代码进行优化。

例如：可以提供 kissy 的类库声明文件 kissy.js ，使用时，命令行加入 --externs kissy.js

 

var KISSY={
    augment:function(){},
    merge:function(){},
    extend:function(){},
    namespace:function(){},
    guid:function(){},
    one:function(){},
    all:function(){},
    log:function(){},
    trim:function(){},
.......

 

而这也是 CC 避免对浏览器以及语言级 api 优化的重要措施，例如 语言规范 api 声明 ，浏览器 api 声明 .....

 

 

 

原理与优化流程：

占位！希望能读懂CC 源码

总结：

使用 CC 的好处显而易见，不仅压缩了代码大小，而且同时CC会做多种已被证实的最佳优化，可减少后期手工优化的繁琐，但是不便之处也很明显，代码必须根据 CC 的需求重新整理，明显的：禁用 with,eval ，不明显的：区分属性访问以及申明外部类库，并且要时刻注意自己导出的外部应用接口。

 

 

 

 

 

 

 

 

评论

2 楼 yiminghe 2011-02-18  

qzlake 写道

lz准备研究closure compiler代码？

大概看了下，勉强会用

1 楼 qzlake 2011-02-17  

lz准备研究closure compiler代码？