专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

2012年10月

  • 使用nodejs压缩合并javascript和css文件

    / 分类: 开发,实践 / 12 Comments

    对于压缩工具前端攻城师最常见的就是雅虎的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这里是根据字符长度)。

    查看全文 »