使用YUI Compressor压缩CSS/JS

贾沛
2023-12-01

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  

 

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

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"  

 

  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"  

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  

 

  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  

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  

 

  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  

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  

 

  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  

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。

 类似资料: