提高页面相应速度之压缩优化js和css文件

Steve Souders在他的《High Performance Web Sites》一书中提出提高网页效率的14条准则，这些可以使用Yahoo! YSlow来进行一个比较形象的检测。

这里主要来说一下第一条准则：Make Fewer HTTP Requests，意思就是尽可能的减少HTTP请求。当时要达到这个目的有很多种方法，其中最重要的一点就是将CSS文件和Javascript文件分别进行压缩和合并，这样就在很大程度上减少了浏览器对服务器的HTTP请求此处，另外一旦被浏览器下载到本地可以对此进行缓存，从而提高了加载速度。

有关于这方面的工具最优秀且使用最为广泛的开源软件非YUI Compressor莫属了。但是YUICompressor只能使用命令行一个个对js或css文件进行压缩，现在我们就通过使用ant脚本来达到批量压缩合并多个文件的目的。

下面以压缩js文件为例进行说明。

首先做一个关于js文件编码规范的约定：所有的原始文件均为 .source.js，经过压缩处理后文件变为.js，将多个压缩后的文件合并后的文件名称为all-min.js。

接下来可以写下面的ant脚本：

 

1. <!-- 对YUICompressor的引用 -->
2. <property name="js.dir" value="${web.dir}/scripts" />
3. <property name="js.release.name" value="all-min.js"/>
4.  
5. <!-- 删除之前压缩合并过的文件 -->
6. <delete>
7.     <fileset dir="${js.dir}" includes="${js.release.name}"/>
8. </delete>
9.        
10. <!-- 执行 yuicompressor 压缩JS
11.    -- parallel="false"：对fileset中的每个文件都执行一次executable参数的命令
12.   -- dest 执行目录
13.    -->
14. <apply executable="java" parallel="false" verbose="true" dest="${js.dir}">
15.     <fileset dir="${js.dir}">
16.         <include name="**/*.source.js"/>
17.     </fileset>
18.         <arg line="-jar"/>
19.         <arg path="${yuicompressor}"/>
20.     <!-- 设置待处理源文件及处理后输出文件的编码格式 -->
21.     <arg line="--charset utf-8"/>
22.     <srcfile/>
23.     <arg line="-o"/>
24.     <!-- 指定文件命名规则 -->
25.     <mapper type="glob" from="*.source.js" to="*.js" />
26.         <targetfile/>
27. </apply>
28.  
29. <!-- 合并文件 -->
30. <concat destfile="${js.dir}/${js.release.name}" fixlastline="true">
31.     <fileset dir="${js.dir}">
32.         <include name="**/*.js"/>
33.         <exclude name="${js.release.name}"/>
34.             <exclude name="**/*.source.js"/>
35.             <exclude name="i18n/*.js"/>
36.         </fileset>
37. </concat>
38.        
39. <!-- 删除生成的临时文件 -->
40. <delete>
41.     <fileset dir="${js.dir}">
42.         <include name="**/*.js"/>
43.         <exclude name="${js.release.name}"/>
44.             <exclude name="**/*.source.js"/>
45.             <exclude name="i18n/*.js"/>
46.         </fileset>
47. </delete>

原文出处: http://www.javatang.com/archives/2008/04/13/0212267.html

作者: Jet Mah from Java堂