web开发中压缩js/css文件一种巧方法

参考资料

http://www.javatang.com/archives/2008/04/13/0212267.html

        web应用中，前端的js、css比较大时，对应用访问的性能影响很大，所以需要压缩js/css文件，将其中的注释、换行符等删除，压缩文件大小，生成一个只有一行代码的压缩后的文件供程序引用（jquery等javascirpt库就是压缩后提供使用的），加载压缩文件后会对性能提高很大。开发时，压缩文件有很多方法，这里建议采用使用yuicompressor-2.4.7.jar方法压缩。由于压缩后的文件只有一行，将注释都去掉，不易阅读和修改，不方便开发人员修改，故往往保留一个压缩前的源文件，供开发人员修改维护，部署时将压缩前源文件使用压缩工具压缩成压缩后文件，程序中实际引用的是压缩后文件。这些工作往往需要手工完成，简单的重复，降低开发、部署的效率。下面提供一种简便方法解决这些问题。

方法原理、特点

       方法主要思路是在开发的工程源码中，可以仍然引用未压缩前的源文件，正常的修改和添加注释不变，源码中不需要保留js/css源文件的压缩后文件，而在部署时使用自动部署工具（Ant）自动将压缩后的文件打包到部署包。这种方法的优点是1）开发人员原来的开发方式不受影响，不需要压缩文件，压缩文件延迟到部署期间通过自动部署工具实现；2）做到了开发、部署工作分离，部署时若需要临时修改，可以在打包时，将压缩前源文件放置到部署包中提供参考；3）开发源码时的修改、注释保证源码可读性，部署期动态压缩，一举两得，提高了开发、部署效率。下面看具体实例。

实例说明

       一个项目中有2个js文件index.js、view.js容量比较大、而且需要频繁修改，如果引入源文件对性能影响比较大。我们使用Ant部署脚本对此脚本进行处理。脚本如下：

<project name="sjfwBuild" default="main" basedir="."> ... <property name="dist.tempdir" value="${app.home}/antbuild/tempdir" /><!--部署包内为缓冲交换的临时目录--> <property name="dist.dir" value="${app.home}/antbuild/output" /><!--部署包输出路径--> <property name="web.dir" value="${app.home}/web" /><!--工程源码的web路径--> <property name="webapp.war" value="sjfw.war" /><!--部署后目标包文件--> ... <target name="war" depends="compileProject" description="打war包"> <echo>删除已经存在的${dist.dir}/${webapp.war}</echo> <delete file="${dist.dir}/${webapp.war}"/> <echo message="备份js源文件到临时目录"/> <copy todir="${dist.tempdir}/sjfw/src" file="${web.dir}/sjfw/index.js"/>               <copy todir="${dist.tempdir}/sjfw/src" file="${web.dir}/sjfw/view.js"/>                  <echo message="在临时目录压缩js文件" />   <java jar="${app.home}/antbuild/lib/yuicompressor-2.4.7.jar" fork="true" failοnerrοr="false">      <arg line="--type js --charset ${charset} --nomunge ${dist.tempdir}/sjfw/src/index.js -o ${dist.tempdir}/sjfw/index.js" />      <arg line="--type js --charset ${charset} --nomunge ${dist.tempdir}/sjfw/src/view.js -o ${dist.tempdir}/sjfw/view.js" /> </java>   <echo>打war包 </echo> <war destfile="${dist.dir}/${webapp.war}" webxml="${web.dir}/WEB-INF/web.xml" compress="true" > <fileset dir="${web.dir}"> ... <exclude name="**/sjfw/index.js" /><!-- 先排除，后续用临时目录中生成压缩文件替代打包--> <exclude name="**/sjfw/view.js" /> </fileset> <fileset dir="${dist.tempdir}"/><!-- 用临时目录中生成压缩文件替代打包--> </war> <echo>打war包成功 </echo> </target>

注：上述脚本中，注释了主要的处理步骤和方法，主要思路是在打war包前，先将需要压缩的js文件备份转存到缓冲交换临时目录，在临时目录中压缩该文件，打war包时，将压缩后的文件复制覆盖到包文件中，这样做到的开发、部署源码文件都是相对独立不受影响的。