翼支付门户架构之使用YUI Compressor优化你的网页

使用YUI Compressor优化你的网页

YUI Compressor是做什么的？

这个小工具主要是用来压缩CSS和JavaScript文件的，当然你觉得可以混淆这些文件里的代码也是可以的，不过我们使用它还是看中其压缩优化的功能。

为什么要优化？

因为这样可以减少网页传输中不必要的字节数，节省带宽，加快页面的访问速度。

使用YUI Compressor的好处？

方便快捷，压缩后的代码文件体积小，有效率高，当然市面上不乏有很多压缩工具，但是很多工具尤其在处理一些大型脚本后往往导致脚本出错失效，这点我对YUI Compressor很放心，毕竟有雅虎这个大公司的技术支持，至少我用到现在没有压坏一个脚本。

如何获取YUI Compressor？

下载地址：https://github.com/yui/yuicompressor/downloads

项目主页：http://yui.github.io/yuicompressor/

但是有些朋友下载下来可能会有些小小的失望，为什么呢？因为这个工具是用Java编写的，也就是说在使用这个工具生效前还必须安装Java的运行环境。

如何使用？

将下载到的YUI Compressor包中的yuicompressor.jar拷贝到指定的目录下。然后通过下面的命令行进行相关操作。

压缩优化JavaScript

java -jar yuicompressor.jar --charset utf-8 D:\myfile.js -o D:\myfile-min.js

压缩优化 CSS 

java -jar yuicompressor.jar --charset utf-8 D:\myfile.css -o D:\myfile-min.css

--charset指定了压缩文件的编码。

如何使用DOS批处理脚本批量压缩JavaScript和CSS？

通常会把项目用到的js和css按照模块放到专门的目录下。

所以需要建立一个DOS批处理脚本来自动处理目录和子目录下的所有js和css文件。

新建一个批处理文件，例如myCompressor.bat，文件内容如下：

@echo off

::设置YUI Compressor启动目录

SET YUIFOLDER=E:\翼支付重构资料\JS、CSS压缩工具\yuicompressor

::设置你的JS和CSS根目录，脚本会自动按树层次查找和压缩所有的JS和CSS

SET JSFOLDER=E:\jsTest

SET CSSFOLDER=E:\jsTest

echo 正在查找 JavaScript ...

chdir /d %JSFOLDER%

for /r . %%a in (*.js) do (

@echo 正在压缩 %%~a ...

@java -jar %YUIFOLDER%\yuicompressor.jar --charset UTF-8 %%~fa -o %%~na.min.js

)

echo 正在查找 CSS ...

chdir /d %CSSFOLDER%

for /r . %%a in (*.css) do (

@echo 正在压缩 %%~a ...

@java -jar %YUIFOLDER%\yuicompressor.jar --charset UTF-8 %%~fa -o %%~na.min.css

)

echo 完成!

pause & exit