1. 爱易网页
  2. HTML教程
  3. 应用YUI Compressor压缩CSS/JS

应用YUI Compressor压缩CSS/JS

日期：2014-05-17　 浏览次数：20638 次

使用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??

?

view plaincopy to clipboardprint?
  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"??

?

view plaincopy to clipboardprint?
  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"??