使用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%)也可以修改参数获得更多的压缩率。

posted on 2009-04-10 11:52  Mainz  阅读(3951)  评论(0编辑  收藏  举报

导航