baiseda 发表于 2013-1-29 09:18:24

Javascript压缩工具(Javascript compressed,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,解压后看看它的帮助文档。很简单。

ESC Introduction
ESCis an ECMAScript pre-processor written in JScript, enabling anunlimited number of external scripts to be compressed/crunched intosupertight, bandwidth-optimized packages. Featuring severalcompression-techniques such as comment removal, whitespace stripping,newline stripping and variable substitution ESC can reduce the overallsize of your code with up to ~45%. Single, multiple scripts and evendirectories with scripts can be merged together at the compressionlevel you decide. The processed output can later be appended or writtento a file, or piped to another application for further processing viaSTDOUT.

ESC do NOT support crunching of inline scripts. Soany attempt passing HTML, ASP, JSP, PHP or other equivalent documentsto ESC is done at your own risk.

ESC supports four levels ofcompression, where a higher level equals higher compression. Bewarethough that levels >2 requires your code to be syntaxically perfector ESC will punish you by producing a broken and useless output.

Thecompression ratio should hit around 25% using the default compressionlevel on a vanilla looking script, but results as high as ~45% can beachieved depending on the script's design / your style of writingcode.

ESC's compression engine is intelligent in the meaningthat it has language syntax, statement and keyword awareness and it*knows* about native objects and members provided by the most commonscripting hosts. This knowledgebase can easily be extended by plugginin userdefined maps with additional information to further gain controlof the crunching procedure. During processing following things aretaken into account :

String and RegExpression read-ahead
Jscript Conditional compilation statements and variables
ECMA-262 Core language definitions (ECMAScript)
Intermediate DOM's (level 0) and DOM level 1
MS Jscript specific objects/methods
Netscape/Mozilla/Opera specific objects/methods/properties
MS WSH (Windows Scripting Host) 1+ native objects

压缩级别分为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压缩代码示例
原来的代码:

<div class="UBBPanel"><div class="UBBTitle">http://www.ad0.cn/netfetch/images/code.gif 程序代码
页: [1]
查看完整版本: Javascript压缩工具(Javascript compressed,Js压缩)(转)