日期:2014-05-16  浏览次数:20319 次

Javascript/CSS压缩工具比较_[分享一下]
原来公司是有一套JS压缩工具的,但感觉性能不是很好,而且不支持CSS压缩,所以查了一下资料,给大家分享一下。

目前有很多的CSS/JS压缩工具,
可以将类似:
function hello(longName) {
  alert('Hello, ' + longName);
}
hello('New User');

紧压成:
function hello(a){alert("Hello, "+a)}hello("New User");

其中常用的有:
Yahoo的YUI compressor: http://developer.yahoo.com/yui/compressor/#support
Google的Closure Compiler: http://code.google.com/closure/compiler/docs/gettingstarted_app.html

两者是使用 Java 编写的开源项目,从体积上看Google的compiler.jar文件大一些,4.8M左右,而Yahoo仅有800多K,但从压缩效率来看,Yahoo的要比Goolge压缩后的文件体积大10%左右,但YUI compressor支持CSS压缩,cimpiler目前没有这个功能,不过CSS的压缩相对JS会相对简单很多。

使用也非常简单,先安装JDK或JRE,建立并运行批处理文件或在Command中直接输入命令,

Assembly code

java -jar compiler.jar --js all.js --js_output_file all-google.js
java -jar yuicompressor-2.4.6.jar all.js -o all-yahoo.js



就可查看二者的压缩结果了。

如图,基本上都压缩了50%以上 494K -> 200多K




其实网站有一定规模以后JS文件是不可能写到一个里面的,JAR或压缩批处理文件也不可能在同一目录,一般需要将各个单独的闭包的JS文件(feature)合成一个,并再进行压缩,所以大多需要二次编程,但其实并不复杂。

也有公司将CSS文件也按Module/Feature划分成若干小文件,最后进行压缩合并,但个人感觉对于中小规模的项目来讲,有一点过度设计,因为CSS不像JS那样相对独立,这样不太利于CSS的复写重用和全局调整。


微软的MSN也有类似的工具,分别叫做CAT,JAT(CSS assembly tool和Javascript assembly tool),还附带有另外一个Image Assembly Tool(IAT?), 可以将 background-image:的若干小图按类型,分辩率合成大图,并自动重新计算background-position的位置,但个人感觉设计的有点过了,会使调整编译过程变得相当复杂。因为这些工具是闭源的(MS的一向风格)所以无从比较性能,不过估计没有google的性能好。



原文在此: http://blog.sina.com.cn/s/blog_54da57aa0100v8u7.html

------解决方案--------------------
不错..
------解决方案--------------------
谢谢楼主分享啊
------解决方案--------------------
有机会了用一下
------解决方案--------------------
正好用到,谢谢。