[转]Javascript压缩工具

来源：互联网发布：网络推广员岗位职责编辑：程序博客网时间：2024/05/22 00:06

原文地址：http://hi.baidu.com/duwuzhe722/blog/item/a5ba873801e35c32b9998ff9.html

【转】 Javascript压缩工具(Javascript compressed,Js压缩)

2011-04-26 09:23

转载自 momoca

最终编辑 duwuzhe722

怎么压缩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压缩代码示例
原来的代码：

程序代码

格式化后：

程序代码

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>

<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>
     
     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文件的压缩就是基于正则表达式的了，效果怎么样我没有测试，有兴趣的朋友可以自己测试一下。