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

原文出处: 提高页面相应速度之压缩优化js和css文件
作者: Jet Mah from Java堂 声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明!

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脚本:
    <!-- 对YUICompressor的引用 -->
    <property name="js.dir" value="${web.dir}/scripts" />
    <property name="js.release.name" value="all-min.js"/>
     
    <!-- 删除之前压缩合并过的文件 -->
    <delete>
        <fileset dir="${js.dir}" includes="${js.release.name}"/>
    </delete>
           
    <!-- 执行 yuicompressor 压缩JS
       -- parallel="false":对fileset中的每个文件都执行一次executable参数的命令
      -- dest 执行目录
       -->
    <apply executable="java" parallel="false" verbose="true" dest="${js.dir}">
        <fileset dir="${js.dir}">
            <include name="**/*.source.js"/>
        </fileset>
            <arg line="-jar"/>
            <arg path="${yuicompressor}"/>
        <!-- 设置待处理源文件及处理后输出文件的编码格式 -->
        <arg line="--charset utf-8"/>
        <srcfile/>
        <arg line="-o"/>
        <!-- 指定文件命名规则 -->
        <mapper type="glob" from="*.source.js" to="*.js" />
            <targetfile/>
    </apply>
     
    <!-- 合并文件 -->
    <concat destfile="${js.dir}/${js.release.name}" fixlastline="true">
        <fileset dir="${js.dir}">
            <include name="**/*.js"/>
            <exclude name="${js.release.name}"/>
                <exclude name="**/*.source.js"/>
                <exclude name="i18n/*.js"/>
            </fileset>
    </concat>
           
    <!-- 删除生成的临时文件 -->
    <delete>
        <fileset dir="${js.dir}">
            <include name="**/*.js"/>
            <exclude name="${js.release.name}"/>
                <exclude name="**/*.source.js"/>
                <exclude name="i18n/*.js"/>
            </fileset>
    </delete>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值