对于压缩工具前端攻城师最常见的就是雅虎的Yui Compressor / Google的Closure Compiler了。
对比其他压缩工具相对在JS和CSS压缩领域比较成熟,压缩率也比较好.
一般会选择结合ANT实现压缩并合并,效果也不错,但是比较偏向个人,团队协作每个人都部署java/ant有些麻烦。
对于个人开发使用ANT的方案也是相对不错的选择。对于团队,最好的解决办法是在服务端压缩,大家只需要登录并执行一个统一的脚本。
下面分享下大致的测试结果,和改用nodejs压缩合并js/css的原因。
js部分采用UglifyJS
1. 压缩jquery 1.8,253 KB:使用UglifyJS(以下简称UJ): 90.5 KB;使用Closure Compiler(以下简称CC): 91.1 KB。
2. 如果在闭包(function($, window, undefined) {...})(jQuery, window); 内的 unused function/variables
CC会被删除没使用的;UJ 默认全部保留,加上 pro.ast_lift_variables(ast) 才会删除未使用的函数/变量 (对象/数组 不会被删除)。
如果直接暴漏在window下的,两个基本差不多。
3. function c(){2}, CC 会警告,UJ不会
4. function c(){e()2},都会抛出异常,显示行数,错误原因。CC提示列错误,UJ不会。
5. function c(){e();2},都保留了2,CC 警告,UglifyJS 无信息
6. CC 一次显示JS里的全部错误(有些是前面的错误引起的, 所以部分是误报),UJ每次只显示一个错误。
7. 0 = {}; CC会报错,而UJ不会。
8. if语句都可很好的优化。
9. CC喜欢把变量/函数(结构简单的)内的语句,直接插入到使用它们的地方,UJ维持原样。
如果函数内的内容较少, CC会把函数的内容直接插入到调用它的地方,比如:
function c(){xxxxxxx('12345678901234567');}
function c(){xxxxxx.yyyyy('12345678901234');}
function c(){xxxxxx.yyyyy.zzzz('12345678901');}
function c(){if (X){alert('1234')};alert('12');}
当其他函数里调用c()时,会把c()方法删除,然后把c()内的内容移动到这里
(当里面的字符串长度+1后,就会直接使用原函数c(),所以CC这里是根据字符长度)。