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

傷城~ 2021-12-12 01:47 238阅读 0赞

**参考资料**

[http://www.javatang.com/archives/2008/04/13/0212267.html][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部署脚本对此脚本进行处理。脚本如下：

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

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

[http_www.javatang.com_archives_2008_04_13_0212267.html]: http://www.javatang.com/archives/2008/04/13/0212267.html