使用YUI Compressor和DOS批处理脚本压缩JavaScript和CSS

对于大量使用JavaScript和CSS的AJAX应用来说，如果JavaScript和CSS大小很大，则传输到客户端的时间会很久，网站性能不佳。而压缩JavaScript和CSS是自然的事情，本文使用YUI Compressor和DOS批处理脚本压缩JavaScript和CSS，加上IIS的GZIP，加起来能得到85%左右的压缩率。（其中YUI Compressor的压缩率大约为50%）

YUI Compressor - The Yahoo! JavaScript and CSS Compressor （Yahoo的JS和CSS压缩工具，具本人对比测试比较好用）
Download 下载地址 : http://www.julienlecomte.net/yuicompressor/
The YUI Compressor requires Java version >= 1.4. （机器需要Java 1.4以上的环境）

常用示例（在cmd中执行）

 1: java -jar D:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar --charset UTF-8 D:\my.js -o D:\my-min.js 

 2: java -jar D:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar --charset UTF-8 D:\my.css -o D:\my-min.css 

 3:  

如果没有给定charset参数，则字符集默认是系统的，此处指定了UTF-8，更加你的实际需要修改。具体语法和其他参数参考：http://www.julienlecomte.net/yuicompressor/

 

使用DOS批处理脚本批量压缩JavaScript和CSS

通常会把项目用到的js和css都按照模块放在专门的目录下：

例如：

 

所以需要建立一个DOS批处理脚本来自动处理目录和子目录下的所有js和css文件。

新建一个批处理文件，例如myCompressor.bat，文件内容如下：

 1: @echo off

 2: ::设置YUI Compressor启动目录

 3: SET YUIFOLDER=D:\yuicompressor-2.4.2\build

 4: ::设置你的JS和CSS根目录，脚本会自动按树层次查找和压缩所有的JS和CSS

 5: SET JSFOLDER=D:\mySite\myJS

 6: echo 正在查找 JavaScript, CSS ...

 7: chdir /d %JSFOLDER%

 8: for /r . %%a in (*.js *.css) do (

 9: @echo 正在压缩 %%~a ...

 10: @java -jar %YUIFOLDER%\yuicompressor-2.4.2.jar --charset UTF-8 %%~fa -o %%~fa

 11: )

 12: echo 完成!

 13: pause & exit

 

文件示例，压缩前后对比

原文件：

 1: //this is desc

 2: function test(value)

 3: {

 4: //this is comment

 5: //this is comment

 6: //this is comment

 7: alert ( value ); 

 8: }

 9: function test2(value)

 10: {

 11: //this is comment

 12: //this is comment

 13: //this is comment

 14: alert ( value ); 

 15: //this is comment

 16: //this is comment

 17: //this is comment

 18: }

 19: 

 20: function test3(value)

 21: {

 22: alert ( value ); 

 23: }

 24: function test4(value)

 25: {

 26:  

 27: alert ( value ); 

 28: }

 29:  

 30: //this is comment

 31:  

 32: //this is comment

 33:  

 34: //this is comment

 35:  

 36: function test5(value)

 37: {

 38: 

 39: alert ( value ); 

 40: }

 41:  

 42: //this is comment

 43: //this is comment

 44: //this is comment

 45: function test6(value)

 46: {

 47:  

 48: 

 49: alert ( value ); 

 50: }

 51:  

 52: 

 53: function test7(value)

 54: {

 55:  

 56: 

 57:  

 58: alert ( value ); 

 59:  

 60: 

 61:  

 62: }

 63:  

 64: 

 65:  

 66: function test8(value)

 67:  

 68: {

 69:  

 70: 

 71:  

 72: alert ( value ); 

 73:  

 74: 

 75:  

 76: }

 77:  

 78: 

 79:  

 80: //this is comment

 81:  

 82: //this is comment

 83:  

 84: //this is comment

 85: function test9(value)

 86: {

 87: alert ( /*This is inline comment*/value ); 

 88:  

 89: var abc = function(v) {//this is a desc

 90: //this is another desc

 91: alert(v);

 92:  

 93: };

 94:  

 95: }

 96: function test10(value)

 97:  

 98: {

 99:  

 100: //this is comment

 101:  

 102: //this is comment

 103:  

 104: //this is comment

 105:  

 106: alert ( value ); 

 107:  

 108: }

 

压缩后：

 1: function test(a){alert(a)}function test2(a){alert(a)}function test3(a){alert(a)}function test4(a){alert(a)}function test5(a){alert(a)}function test6(a){alert(a)}function test7(a){alert(a)}function test8(a){alert(a)}function test9(b){alert(b);var a=function(c){alert(c)}}function test10(a){alert(a)};

使用YUI Compressor和DOS批处理脚本压缩JavaScript和CSS，加上IIS的GZIP，加起来能得到85%左右的压缩率。（其中YUI Compressor的压缩率大约为50%）也可以修改参数获得更多的压缩率。

• ExtJS+ASP.NET实现真实的进度条显示服务器端长时间操作的进度
• ExtJS+ASP.NET实现异步Tree的节点搜索和查找下一个(FindNext)
• ExtJS+ASP.NET实现Tree节点的拖动(DragDrop)
• ExtJS+ASP.NET实现Grid到Tree的拖动(DragDrop)
• 使用YUI Compressor和DOS批处理脚本压缩JavaScript和CSS
• 优化JavaScript
• 区分JavaScript中的underfined,null和NaN