js文件压缩的两种方法

方法一：Javascript压缩工具(Javascript compressed,Js压缩)

作者: Choy Lv&<60;&<60;日期: 2007-09-02 02:01


Javascript压缩(Js压缩)工具聚合

怎么压缩Js？为什么要压缩Javascript？ Javascript compressed/crunched
开发Ajax除了自己要写js代码外，同样也免不了要使用其它第三方js库，是否该为JavaScript减肥？
当你提高了用户体验，做出了很绚丽的效果而欣喜的时候，是否想过优化一下JS的效率,比如微软的live，其中的js做了压缩处理。JS的速度分为两种， 下载速度和执行速度。今天就先来说说下载速度。要想js的下载速度快，就需要尽量减小js文件的大小。这里我们可以使用一个工具ESC (ECMAScript cruncher)来帮我们完成这个工作，不过这个工具只能在Windows下使用。到http://www.saltstorm.net/depo/esc/introduction.wbm?pod=js下载ESC.zip,解压后看看它的帮助文档。很简单。

压缩级别分为5种，从0到4

Level 0 :: No compression

Level 1 :: Comment removal

Level 2 :: Whitespace removal

Level 3 :: Newline removal

Level 4 :: Variable substitution

在WINDOWS命令行下执行

cscript ESC.wsf -ow menu2.js menu.js将会把menu.js按照js压缩级别2来压缩（默认js压缩级别为2）为menu2.js

cscript ESC.wsf -l 3 -ow menu3.js menu.js将会把menu.js按照js压缩级别3来压缩为menu3.js

需要注意的是，js压缩级别4会把变量名修改，如果你的js中用到了全局变量或者类的话，就不能使用该压缩级别了，否则其它使用你的js的文件可能会无法正常运行。

试了一下，把yui的menu.js压缩了一下，对应的级别和压缩率分别如下：

js压缩级别1:压缩率44.41%

js压缩级别2:压缩率62.82%

js压缩级别1:压缩率64.93%

原来130多K的js文件压缩后也就40多K，看来还是挺有用处的。


另外还有一个小工具jsmin也可以压缩，不过没有ESC的level选项，看了一下好像压缩效果类似于ESC的level3.济南大学的一些老师写了个jsmin的图形界面程序JsMinGUI,使用起来更加方便。：－）

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/&<60;&<60;在线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中的配置
引用内容
&<60;&<60;
&<60;&<60;&<60;&<60;AddHeaderFilter&<60;&<60;
&<60;&<60;&<60;&<60;&<60;&<60;
&<60;&<60;&<60;&<60;&<60;&<60;&<60;&<60;badqiu.web.filter.AddHeaderFilter&<60;&<60;
&<60;&<60;&<60;&<60;&<60;&<60;
&<60;&<60;&<60;&<60;&<60;&<60;
&<60;&<60;&<60;&<60;&<60;&<60;&<60;&<60;headers&<60;&<60;
&<60;&<60;&<60;&<60;&<60;&<60;&<60;&<60;Content-Encoding=gzip&<60;&<60;
&<60;&<60;&<60;&<60;&<60;&<60;
&<60;&<60;
&<60;&<60;
&<60;&<60;
&<60;&<60;&<60;&<60;AddHeaderFilter&<60;&<60;
&<60;&<60;&<60;&<60;*.gzjs&<60;&<60;



测试prototype.js是否正常的代码
程序代码
&<60;&<60;
&<60;&<60;
&<60;&<60;
&<60;&<60;
&<60;&<60;
&<60;&<60;
&<60;&<60;&<60;&<60;
&<60;&<60;
&<60;&<60;&<60;&<60;&<60;&<60;
&<60;&<60;
&<60;&<60;



在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文件压缩


三、在线压缩工具（小js文件更好）
http://yui.2clics.net/