原文地址:http://hi.baidu.com/duwuzhe722/blog/item/a5ba873801e35c32b9998ff9.html
【转】 Javascript压缩工具(Javascript compressed,Js压缩)
2011-04-26 09:23
怎么压缩Js?为什么要压缩Javascript? Javascript compressed/crunched 当你提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,比如微软的live,其中的js做了压缩处理。JS的速度分为两种,下载速度和执行速度。今天就先来说说下载速度。要想js的下载速度快,就需要尽量减小js文件的大小 1.这里我们可以使用一个工具ESC(ECMAScript cruncher)来帮我们完成这个工作,不过这个工具只能在Windows下使用。到http://www.saltstorm.net/depo/esc/introduction.wbm?pod=js下载ESC.zip,解压后看看它的帮助文档 2.一个小工具jsmin也可以压缩,不过没有ESC的level选项,看了一下好像压缩效果类似于ESC的level3.济南大学的一些老师写了个jsmin的图形界面程序JsMinGUI,使用起来更加方便。:-) 3.Dojo项目组也提供了一个工具,shrinksafe可以通过 http://alex.dojotoolkit.org/shrinksafe/ 在线的上传要压缩的文件,处理完毕后可以保存到本地,另外shrinksafe还提供了一个本地运行的版本,需要jre1.4的支持。Ps:对于一些压缩的代码,在阅读时可以用 JavaScript Code Improver 来进行格式化。看看它主页上的一个例子: javascript压缩代码示例 原来的代码:
程序代码
<script language="JavaScript">var i=0,s="",k=0;function foo(){for(j=0;j<10;j++){for(i=0;i<10;i++){s="string1";k=Math.floor(Math.random()*10);}for(i=20;i>9;i--){s="string2";k=I;}}}</script>
格式化后:
程序代码
<script language="JavaScript">
var I = 0, s = "", k = 0; function foo() { for(j = 0; j < 10; j++) { for(I = 0; I < 10; i++) { s = "string1"; k = Math.floor( Math.random()*10 ); } for(I = 20; I > 9; i--) { s = "string2"; k = I; } } } </script> js压缩,巨NB的dHTML特效. 来自: http://hometown.aol.de/_ht_a/memtronic/MemTronic_CruncherCompressor_v09g.html JS压缩示例样本: JS压缩示例样本 更多的JS压缩器以及混淆器 http://dean.edwards.name/packer/ 在线Js压缩 A Online JavaScript Compressor/Obfuscator version 2.0.2 Also available as a .NET application 开源下载: http://dean.edwards.name/download/#packer JS压缩器帮助: http://dean.edwards.name/packer/usage/ http://dean.edwards.name/packer/usage/sample.html http://hometown.aol.de/_ht_a/memtronic/ JavaScript Compressor/Obfuscator Demo: http://www.brainjar.com/js/crunch/demo.html JavaScript Code Improver: JavaScript Code Improver Download 前面提到的Javascript压缩,都是采用删除注释,删除多余空格,替换字符等方式进行的,还有一种通过服务器的配置来实现Js静态压缩的方法: 关于JavaScript的gzip静态压缩方法 传统的JS压缩(删除注释,删除多余空格等)提供的压缩率有时还是不尽不意,幸亏现在的浏览器都支持压缩传输(通过设置http header的Content-Encoding=gzip),可以通过服务器的配置(如apache)为你的js提供压缩传输,或是appfuse中使用的GZipFilter使tomcat也提供这种能力 现在的问题是这种动态的压缩会导致服务器CPU占用率过高,现在我想到的解决辨法是通过提供静态压缩(就是将js预先通过gzip.exe压缩好) 一.下面描述在tomcat中的应用 1.将prototype.js通过gzip.exe压缩保存成prototype.gzjs 2.设置header,我编写了一个简单的AddHeadersFilter来将所有以gzjs结尾的文件增加设置header Content-Encoding=gzip web.xml中的配置
引用内容
<filter>
<filter-name>AddHeaderFilter</filter-name> <filter-class> badqiu.web.filter.AddHeaderFilter </filter-class> <init-param> <param-name>headers</param-name> <param-value>Content-Encoding=gzip</param-value> </init-param> </filter> <filter-mapping> <filter-name>AddHeaderFilter</filter-name> <url-pattern>*.gzjs</url-pattern> </filter-mapping> 测试prototype.js是否正常的代码
程序代码
<html>
<head> <!-- type="text/javascript"不可少,有的浏览器缺少这个不能运行 --> <script src="prototype.gzjs" type="text/javascript"></script> </head> <body> <input id="username" name="username" value="badqiu"/><br /> <input id="email" value="badqiu@gmail.com"/> <script> <!-- 测试prototype的方法是否正常--> alert($F('username')) </script> </body> </html> 在Apache httpd中可以直接通过在httpd.conf增加AddEncoding x-gzip .gzjs来映射.gzjs文件的header 二.相关压缩率数据 1. prototype.js 1.5.0_rc0原始大小56KB,未经任何处理直接使用gzip压缩为12KB,总压缩率79% 2. 通过js压缩工具压缩过的protytype.js为20KB,使用gzip压缩为10KB,总压缩率为83% 3. 实际项目中的多个js合并成的文件 439KB,直接通过gzip压缩为85KB,总压缩率81% 4. 439KB经过js压缩为165KB,再经过gzip压缩为65KB,总压缩率86% 基本上你都可以忽略js压缩工具的压缩率,直接使用gzip压缩 gzip下载地址 http://www.gzip.org tomcat的压缩配置示例下载地址: http://www.blogjava.net/Files/badqiu/gziptest.rar 其主要是利用服务器自带的动态压缩功能 传输时压缩数据流. Javascript compressed,Js压缩,javascript压缩,js压缩工具,js压缩合并,js文件压缩
一个是dojo shrinksafe( http://shrinksafe.dojotoolkit.org/ ),还有一个是yui compressor( http://developer.yahoo.com/yui/compressor/ ),感觉还不错。我压缩了一下prototype-1.6.0.js,源文件差不多122K,dojo shrinksafe压缩后,文件变成86K,yui compressor压缩后,文件变成72K,看起来yui compressor效果更好。测试了一下,压缩后的文件也没有出现什么问题。 其实两个工具都是基于Rhino( http://mozilla.org/rhino) 这个开源项目的,不同于其他压缩工具是基于正则表达式来进行JavaScript代码匹配来进行压缩,Rhino是一个JavaScript的解析器,是 解释需要压缩的JavaScript代码后再进行比如变量替换,消除空行,消除注释等压缩方法。Rhino是一个jar包,运行他需要在你的机器上安装 JDK,我安装的是j2sdk1.4.2_17,安装完成后,便可以使用了。 dojo shrinksafe基本上没有在Rhino基础上在进行封装,直接用Rhino即可,而yui compressor是基于Rhino的基础上,再进行了封装,使压缩效率更高。 使用方法: 安装jdk cd /root/ wget http://cds.sun.com/is-bin/INTERSHOP.enfinity/WFS/CDS-CDS_Developer-Site/en_US/-/USD/VerifyItem-Start/j2sdk-1_4_2_17-linux-i586-rpm.bin?BundledLineItemUUID=jB5IBe.o1awAAAEakdc_hkfV&OrderID=IXVIBe.oEIoAAAEaf9c_hkfV&ProductID=py5IBe.pWhAAAAEY1alJk805&FileName=/j2sdk-1_4_2_17-linux-i586-rpm.bin chmod a+x j2sdk-1_4_2_17-linux-i586-rpm.bin ./j2sdk-1_4_2_17-linux-i586-rpm.bin rpm -ivh j2sdk-1_4_2_17-linux-i586.rpm dojo shrinksafe: cd /root/ wget http://svn.dojotoolkit.org/src/util/trunk/shrinksafe/custom_rhino.jar /usr/java/j2sdk1.4.2_17/bin/java -jar custom_rhino.jar -c infile.js > outfile.js 2 > &1 其中infile.js 即是你需要压缩的JavaScript文件,outfile.js 是压缩后的输出文件 yui compressor: cd /root/ wget http://www.julienlecomte.net/yuicompressor/yuicompressor-2.3.4.zip unzip yuicompressor-2.3.4.zip cd yuicompressor-2.3.4/build/ /usr/java/j2sdk1.4.2_17/bin/java -jar yuicompressor-2.3.4.jar --preserve-semi -o outfile.js infile.js 类 似,其中infile.js 即是你需要压缩的JavaScript文件,outfile.js 是压缩后的输出文件,另外那个参数,--preserve-semi ,表示保留代码中的分号,为了压缩后的程序的正确性,我在这保留了分号。其他还有一些参数,具体可参见这: http://www.julienlecomte.net/yuicompressor/README 值得一提的是,yui compressor还支持css文件的压缩,但是对于css文件的压缩就是基于正则表达式的了,效果怎么样我没有测试,有兴趣的朋友可以自己测试一下。 |