http://dean.edwards.name/packer/
怎麼壓縮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
ESC is an ECMAScript pre-processor written in JScript, enabling an unlimited number of external scripts to be compressed/crunched into supertight, bandwidth-optimized packages. Featuring several compression-techniques such as comment removal, whitespace stripping, newline stripping and variable substitution ESC can reduce the overall size of your code with up to ~45%. Single, multiple scripts and even directories with scripts can be merged together at the compression level you decide. The processed output can later be appended or written to a file, or piped to another application for further processing via STDOUT.
ESC do NOT support crunching of inline scripts. So any attempt passing HTML, ASP, JSP, PHP or other equivalent documents to ESC is done at your own risk.
ESC supports four levels of compression, where a higher level equals higher compression. Beware though that levels >2 requires your code to be syntaxically perfect or ESC will punish you by producing a broken and useless output.
The compression ratio should hit around 25% using the default compression level on a vanilla looking script, but results as high as ~45% can be achieved depending on the script's design / your style of writing code.
ESC's compression engine is intelligent in the meaning that it has language syntax, statement and keyword awareness and it *knows* about native objects and members provided by the most common scripting hosts. This knowledgebase can easily be extended by pluggin in userdefined maps with additional information to further gain control of the crunching procedure. During processing following things are taken 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壓縮代碼示例
原來的代碼：
程序代碼<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="[email protected]"/>
<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文件壓縮
怎麼壓縮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
ESC is an ECMAScript pre-processor written in JScript, enabling an unlimited number of external scripts to be compressed/crunched into supertight, bandwidth-optimized packages. Featuring several compression-techniques such as comment removal, whitespace stripping, newline stripping and variable substitution ESC can reduce the overall size of your code with up to ~45%. Single, multiple scripts and even directories with scripts can be merged together at the compression level you decide. The processed output can later be appended or written to a file, or piped to another application for further processing via STDOUT.
ESC do NOT support crunching of inline scripts. So any attempt passing HTML, ASP, JSP, PHP or other equivalent documents to ESC is done at your own risk.
ESC supports four levels of compression, where a higher level equals higher compression. Beware though that levels >2 requires your code to be syntaxically perfect or ESC will punish you by producing a broken and useless output.
The compression ratio should hit around 25% using the default compression level on a vanilla looking script, but results as high as ~45% can be achieved depending on the script's design / your style of writing code.
ESC's compression engine is intelligent in the meaning that it has language syntax, statement and keyword awareness and it *knows* about native objects and members provided by the most common scripting hosts. This knowledgebase can easily be extended by pluggin in userdefined maps with additional information to further gain control of the crunching procedure. During processing following things are taken 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壓縮代碼示例
原來的代碼：
程序代碼<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="[email protected]"/>
<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文件壓縮
