zoukankan      html  css  js  c++  java
  • 使用YUI Compressor压缩CSS/JS

    JS/CSS文件大,用户访问站点的时候需要下载JS/CSS的时间长就会感觉慢,有的甚至由于CSS的文件而造成页面初始打开很凌乱。

    我们怎么提高用户下载JS/CSS的速度呢?

    1、我们无法改变用户的网络状况,只有自己网站使用更快的带宽或者使用更强的服务器,使用户访问我们的时候感觉很快。

    2、对JS/CSS文件进行压缩,由于文件较小,用户下载的时间就很短。

    解决方案1,需要花费比较多的money,方案2实现比较简单,而且效果也明显。

    下面我们介绍使用YUI Compressor进行JS/CSS压缩

    1、下载yuicompressor http://www.julienlecomte.net/yuicompressor/

    2、使用ant编译得到yuicompressor-x.y.z.jar的包,进入yuicompressor-x.y.z目录运行ant -f build.xml

    3、在build目录下得到yuicompressor-x.y.z.jar的包,使用java -jar yuicompressor-2.4.2.jar in.js -o out.js

    看下out.js的源文件就会发现去掉了注释空格等信息。

    更多yui compressor的帮助请查看 http://www.julienlecomte.net/yuicompressor/README

    项目中需要对javascript进行打包和压缩,我选用了yuicompressor

    yuicompressor可以压缩JS和CSS文件,去除文件中的无用空格、换行和注释。大大的减小JS和CSS文件的体积。

    简单的命令如下

    Java代码
    1. java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js table.js  


    --type指定要打包的文件类型,可选的有 js和css
    --charset 指定字符集
    -o 指定输出的文件名,如果不指定这个参数将会把压缩后的内容输出到命令行上
    最后的table.js是要打包的源文件

    不过这样压缩有一个缺点,只能一个一个文件的进行压缩,所以使用bat进行批处理压缩

    建立一个compresjs.bat文件,内容如下

    Java代码
    1. (dir %1 /aa /b /s | findstr /e /c:"js") >tmp.txt   
    2. for /f %%i in (tmp.txt) do java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o %%i.tmp %%i & copy %%i".tmp" %%i & del %%i".tmp"  

    运行这个bat文件,会自动寻找本文件所在目录下所有子文件夹中的.js文件,进行压缩并覆盖源文件。

    compresjs.bat使用的方法只是对文件进行压缩,如果有10个源文件,还会压缩成10个文件,并没有进行打包。 我们可以对他进行更进一步的处理,把这10个源文件打包压缩成1个文件,就像ext-all.js那样。

    建立一个packagejs.bat文件,内容如下

    Java代码
    1. for /r ..\WebContent\js %%i in (*.js) do type %%i>>uiiang-debug.js   
    2. java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js  

    在packagejs.bat中,先将..\WebContent\js下的所有JS文件内容合并到uiiang-debug.js文件中,然后再使用yuicompressor对uiiang-debug.jsp压缩成uiiang.js,这样就可以得到一个经过压缩并包含全部.js文件的代码了。

    packagejs.bat中使用的方法有一个缺点,那就是它在合并js文件时的顺序,是按照文件夹及子文件夹还有js文件的排列顺序进行合并的,也就是按文件名顺序排列。但是在我们实际项目中,一般情况下JS文件的引用是要指定一个特定的加载顺序,不然的话就会报错。所以还要对packagejs.bat进行再进一步的改造。

    首先要建立一个列表文件dir.txt

    Java代码
    1. ..\WebContent\js\widgets\WidgetInit.js   
    2. ..\WebContent\js\utils\Cache.js   
    3. ..\WebContent\js\common\GlobalConstant.js   
    4. ..\WebContent\js\common\GlobalVariable.js   
    5. ..\WebContent\js\common\GlobalFunc.js   
    6. ..\WebContent\js\core\Initialize.js  

    在这个文件中,按照JSP中指定的JS文件加载顺序写好文件的路径
    再修改packagejs.bat

    Java代码
    1. for /f %%i in (dir.txt) do type %%i >> uiiang-debug.js   
    2. java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js  

    执行这个packagejs.bat文件后,批处理命令会自动读取dir.txt并按照你指定的顺序逐行取出.js文件的路径进行,把文件内容合并到uiiang-debug.js中。

    另外要注意的一点就是在dir.txt中,一定要把所需要打包压缩的的JS文件路径全部列出来,因为新的pakagejs.bat不会再自动寻找全部的JS文件了,如果有遗漏就只好报错

    至此,批处理压缩打包js文件的工作就完成了,还可以将代码中的.JS换成.css对CSS文件进行打包,当然yuicompressor的--type也要改成css。

  • 相关阅读:
    python学习----8.28---单例模式,网络编程
    python学习-----8.27----异常处理,元类
    python学习--8.23
    python学习-----8.22--classmethod和staticmethod
    Python学习---8.21组合,多态,封装
    python学习----8.20面向对象---继承与派生
    Python学习----8.17--面向对象编程
    python成长之旅 一
    python java php语言之间的对比
    python成长之旅
  • 原文地址:https://www.cnblogs.com/lzhdim/p/1525281.html
Copyright © 2011-2022 走看看