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