作者主題: [分享] yuicompressor-2.4.2 壓縮 javascript (閱讀 15609 次)

Yamaka · « 於: 2009-09-22 20:25 »

因為最近自己寫比較多的JS, 雖然 JS 檔不算很大, 所有的加加起來也有幾10K啊
所以就想說希望能將JS裡的不必要的字元資料清除, 也就是所謂的 JS 壓縮
例如我們常常會用到別人寫好的JS, 用編輯器開啟看起來像這樣..

;(function($){if(/1\.(0|1|2)\.(0|1|2)/.test($.fn.jquery)||/^1.1/.test($.fn.jquery)){alert('blockUI requires jQuery v1.2.3 or later!  .......

這是 jQuery blockUI plugin 壓縮後的長像, 一般來說
壓縮後的JS檔大小大概只有原來的一半大小
如果再加上 apache 壓縮模組 mod_deflate 輸出
大小大概又可以再壓縮將近1/2 ~ 1/3, 這樣一來
JS傳輸時就大概只有原來 1/3 ~ 1/5 的大小

http://yuilibrary.com/downloads/#yuicompressor

這個是 yahoo 提供可免費(?)使用的 JS 壓縮器
用java寫的還附有原始碼耶~~
README裡說要 java 1.4 以上的版本
我的系統是 ubuntu 9.04 ...

$ java -version
java version "1.6.0_0"
OpenJDK Runtime Environment (IcedTea6 1.4.1) (6b14-1.4.1-0ubuntu11)
OpenJDK 64-Bit Server VM (build 14.0-b08, mixed mode)
$ java -jar yuicompressor-2.4.2.jar jquery.dockPanel.js -o jquery.dockPanel.min.js

JS 原檔案有7.4KB, 壓縮後只剩 4.3KB
瀏覽器下載後『 View Page Info』裡顯示

size: 1.76 KB (1,804 bytes)

未經 yuicompressor 壓縮直接下載則是..

size: 2.79 KB (2,855 bytes)

兩次壓縮後資料量比一次壓縮少了1K

TyroneYeh · « **回覆 #1 於:** 2009-09-23 00:32 »

不錯用哦！！
謝謝

hikohan · « **回覆 #2 於:** 2009-09-23 10:01 »

fyi:

jsmin onfly:
http://code.google.com/p/jsmin-php/

ex:

代碼: [選擇]

<script type="text/javascript" language="JavaScript" src="js/jsmin.php?f=foo.js"></script>

Yamaka · « **回覆 #3 於:** 2009-09-23 10:23 »

引述: hikohan 於 2009-09-23 10:01

fyi:

jsmin onfly:
http://code.google.com/p/jsmin-php/

哇~~~ 這是即時壓縮的耶~~

嗯~ JS 還在編寫階段很適合用這個啦~
不過, 如果編寫完成暫時不會再修改的話
還是直接用 yuicompressor 壓縮起來
這樣可以減少一些主機的負擔

hikohan · « **回覆 #4 於:** 2009-09-23 11:03 »

那...佈局時下:

代碼: [選擇]

wet http://foo/js/jsmin.php?f=protoWorks.js -O /var/www/html/js/work.js
也是可以幫助你省事喔。

Yamaka · « **回覆 #5 於:** 2009-09-23 11:28 »

引述: hikohan 於 2009-09-23 11:03

那...佈局時下:

代碼: [選擇]
wet http://foo/js/jsmin.php?f=protoWorks.js -O /var/www/html/js/work.js
也是可以幫助你省事喔。

呃~~ wet

wget 吧

TyroneYeh · « **回覆 #6 於:** 2009-09-23 15:47 »

哪一種比較好啊！！
yuicompressor 還是 jsmin.php ?
用 wget 跟 yuicompressor 有差嗎？

TyroneYeh · « **回覆 #7 於:** 2009-09-23 23:57 »

yuicompressor 比較小一點，
不過都只是把註解換行跟一些排列都縮成一行不方便閱讀，用 Google Chrome 才會快一些吧！
傳輸有用 deflate 壓過了！沒有用 javascript compressor 壓過好像不會差到哪裡耶！
像 .NET 的產生的 script 是不是加了 base64 在壓過啊！！

Yamaka · « **回覆 #8 於:** 2009-09-24 00:55 »

引述: TyroneYeh 於 2009-09-23 23:57

yuicompressor 比較小一點，
不過都只是把註解換行跟一些排列都縮成一行不方便閱讀，用 Google Chrome 才會快一些吧！
傳輸有用 deflate 壓過了！沒有用 javascript compressor 壓過好像不會差到哪裡耶！

有沒有用 javascript compressor 壓縮過還是有差啦~
以 jquery-1.3.2.js 為例, 相差了 15.28KB..

no js cmp size: 117.9 KB (120763 bytes)
apache deflate size: 34.53 KB (35,355 bytes)

js cmp size: 55.9 KB (57254 bytes)
apache deflate size: 19.25 KB (19,716 bytes)

像我自己改寫的那個 plugin, 原檔案不太才7k多
但是 js 壓縮過後再經過 deflate 也差了1K啊

kenduest · « **回覆 #9 於:** 2009-09-24 01:15 »

幾個問題討論？

這樣機制耗費 cpu 處理時間有多久？這個需要討論呢。

另外把 apache 內建壓縮那 module 壓縮率由預設調高，是否也會有幫助？

fillano · « **回覆 #10 於:** 2009-09-24 08:15 »

像opera這樣的嵌入式瀏覽器也號稱可以用壓縮技術提昇傳輸速度，不過對於伺服器應該會有影響。另一個做法是用gzip壓好的檔案來直接用，這樣不必做即時壓縮。

yuicompressor裡面會使用rhino引擎來剖析javascript，然後以代換變數名稱、刪掉不必要的空行/空格/換行、刪掉註解等方式，所以才有辦法大幅縮減javascript檔案體積。出來的檔案完全不適合人來閱讀（這樣的做法相當於使用混淆器），但是對於瀏覽器沒有什麼影響。（刪掉註解可以縮減不少體積，另外改變數名及函數名也是可縮減比較多檔案體積的方法。刪掉空行或是換行其實效果不那麼好）jquery使用yuicompressor幾乎把檔案體積縮到一半。

私心希望他有更多檢查功能，例如檢查命名衝突等等，然後可以把多支js合成一支。

Yamaka · « **回覆 #11 於:** 2009-09-24 09:50 »

引述: kenduest 於 2009-09-24 01:15

幾個問題討論？

這樣機制耗費 cpu 處理時間有多久？這個需要討論呢。

另外把 apache 內建壓縮那 module 壓縮率由預設調高，是否也會有幫助？

嗯~ DeflateCompressionLevel 設定不同, 結果:

no js compress
deflate 8 size: 34.53 KB (35,355 bytes)
deflate 2 size: 40.59 KB (41,569 bytes)

js compress
deflate 8 size: 19.25 KB (19,716 bytes)
deflate 2 size: 21.5 KB (22,014 bytes)

不同的 Level 對同一個檔案來說壓縮率就會不同

試過 Level 設 9, 結果跟 8 一模一樣
可能檔案需要再大許多才會有明顯差別吧

至於 cpu 耗費該如何測試呢?
由於目前主機有在跑一些網站與VM
所以在不影響這些正常運作的情形下
有什麼方式可以測試這部分呢~

Yamaka · « **回覆 #12 於:** 2009-10-02 19:02 »

下午將 jsmin-1.1.1.php 借用 smarty 的方式使用, 效果還不錯

代碼: [選擇]

  function getJSMin($jsPath, $forceCompress = false) {
    global $rootPath;
    
    if (file_exists($jsPath)) {
      $_filename = urlencode(basename($jsPath));
      $_crc32 = sprintf('%08X', crc32($jsPath));
      $_crc32 = substr($_crc32, 0, 2). substr($_crc32, 0, 3).$_crc32;
      $jsCmpFilename = $rootPath . '/templates_c/%%' . $_crc32 . '%%' . $_filename;
      if (!$forceCompress) {
        if (!file_exists($jsCmpFilename) || filemtime($jsPath) > filemtime($jsCmpFilename)) {
          $forceCompress = true;
        }
      }

      // compressing..
      if ($forceCompress) {
        require_once('xxxx/jsmin-1.1.1.php');
        $jsCompressData = JSMin::minify(file_get_contents($jsPath));
        //unlink($jsCmpFilename);
        file_put_contents($jsCmpFilename, $jsCompressData);
        return $jsCompressData;
      } else {
        return file_get_contents($jsCmpFilename);
      }
    }
  }

大概說明一下:

先檢查壓縮過的js檔是否存在, 不存在便壓縮來源js檔並存入 templates_c, 這是 smarty 預設的路徑
如果壓縮檔已存在, 檢查檔案最後修改時間, 來源檔時間大於壓縮檔時間便壓縮
壓縮檔檔名也是參考 smarty, 避免因檔案相同而覆蓋或讀取錯誤內容
最後會傳回壓縮過的js檔內容

測試了一下, 使用上沒問題, 當 js 重新上傳便會重新壓縮過, 否則直接讀取已壓縮好的內容
我只觀察 top 裡 apache 程序的情形, 每次更新網頁, top 大概會有4~6 個新的 apache 程序產生
當需要壓縮時, 有一個 apache 程序會使用 3% 的 CPU, 不需壓縮則所有 apache 程序都只使用 1%

Yamaka · « **回覆 #13 於:** 2009-10-03 12:49 »

花了一個早上時間, 另外弄了一個 php 即時 gzip 功能, 可以即時將 js 檔壓縮成 gzip
再用上一篇的方式, 將 cache 檔存到 templates_c, 然後用 ab 來測試...

代碼: [選擇]

$ ab -c 5 -n 2000 -H 'Accept-Encoding: gzip' http://www.xxxxx.com/js/js-gzip.php?js=myjs.js
This is ApacheBench, Version 2.3 <$Revision: 655654 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking www.hala2u.com (be patient)
Completed 200 requests
Completed 400 requests
Completed 600 requests
Completed 800 requests
Completed 1000 requests
Completed 1200 requests
Completed 1400 requests
Completed 1600 requests
Completed 1800 requests
Completed 2000 requests
Finished 2000 requests


Server Software:        Apache
Server Hostname:        www.xxxxx.com
Server Port:            80

Document Path:          /js/js-gzip.php?js=myjs.js
Document Length:        2574 bytes

Concurrency Level:      5
Time taken for tests:   70.942 seconds
Complete requests:      2000
Failed requests:        0
Write errors:           0
Total transferred:      5508000 bytes
HTML transferred:       5148000 bytes
Requests per second:    28.19 [#/sec] (mean)
Time per request:       177.355 [ms] (mean)
Time per request:       35.471 [ms] (mean, across all concurrent requests)
Transfer rate:          75.82 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       50   68  16.0     63     132
Processing:    81  109  50.1    108     553
Waiting:       68   91  32.6     95     427
Total:        133  177  48.9    172     606

Percentage of the requests served within a certain time (ms)
  50%    172
  66%    173
  75%    173
  80%    173
  90%    185
  95%    199
  98%    220
  99%    518
 100%    606 (longest request)

代碼: [選擇]

$ ab -c 5 -n 2000 -H 'Accept-Encoding: gzip' http://www.xxxxx.com/js/js-min.php?js=myjs.js
This is ApacheBench, Version 2.3 <$Revision: 655654 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking www.hala2u.com (be patient)
Completed 200 requests
Completed 400 requests
Completed 600 requests
Completed 800 requests
Completed 1000 requests
Completed 1200 requests
Completed 1400 requests
Completed 1600 requests
Completed 1800 requests
Completed 2000 requests
Finished 2000 requests


Server Software:        Apache
Server Hostname:        www.xxxxx.com
Server Port:            80

Document Path:          /js/js-min.php?js=myjs.js
Document Length:        2566 bytes

Concurrency Level:      5
Time taken for tests:   74.329 seconds
Complete requests:      2000
Failed requests:        0
Write errors:           0
Total transferred:      5512000 bytes
HTML transferred:       5132000 bytes
Requests per second:    26.91 [#/sec] (mean)
Time per request:       185.821 [ms] (mean)
Time per request:       37.164 [ms] (mean, across all concurrent requests)
Transfer rate:          72.42 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       50   76 165.4     62    3106
Processing:    81  110  57.9    108    1022
Waiting:       68   94  47.6     93    1008
Total:        133  186 173.5    172    3188

Percentage of the requests served within a certain time (ms)
  50%    172
  66%    173
  75%    173
  80%    174
  90%    199
  95%    200
  98%    458
  99%    545
 100%   3188 (longest request)

兩種方式差不多耶 @@

Yamaka · « **回覆 #14 於:** 2009-10-03 18:49 »

突然想到, 兩種方式用 ab 測出來差不多原因, 應該是網路傳輸的問題吧

以下是 js 即時壓縮 gzip 的 php 碼

代碼: [選擇]

  function getJSGZip($jsPath, $jsMinCompress = false) {
    global $rootPath;
    
    if (file_exists($jsPath)) {
      $_filename = urlencode(basename($jsPath));
      $_crc32 = sprintf('%08X', crc32($jsPath));
      $_crc32 = substr($_crc32, 0, 2). substr($_crc32, 0, 3).$_crc32;
      $jsCmpFilename = $rootPath . '/templates_c/%%' . $_crc32 . '%%' . $_filename.'.gzjs';
      
      if (!file_exists($jsCmpFilename) || filemtime($jsPath) > filemtime($jsCmpFilename)) {
        $src_data = '';
        if ($jsMinCompress) {
          $src_data = getJSMin($jsPath);
        } else {
          $src_data = file_get_contents($jsPath);
        }
        
        if ( $out = gzopen($jsCmpFilename, "wb")) {
          gzwrite($out, $src_data);
          gzclose($out);
        }
      }
      //header("Content-Encoding: gzip");
      //header("Content-Type: text/javascript");
      //header("Content-Length: " . filesize($jsCmpFilename));
      //readfile($jsCmpFilename);
      return $jsCmpFilename;
    }
  }

最後可以傳回壓縮後的完整路徑檔名, 或是直接送出壓縮檔內容

Yamaka · « **回覆 #15 於:** 2009-10-04 13:19 »

引述: yamaka 於 2009-09-22 20:25

$ java -jar yuicompressor-2.4.2.jar jquery.dockPanel.js -o jquery.dockPanel.min.js

今天在 php 用 popen 使用上面的指令
結果有些可以成功編碼, 有些卻得到到空白
追查原因(追了2,3個小時orz)原來是 js 檔 utf-8 的問題
BOM 格式的 js 檔在這裡似乎 yuicompressor-2.4.2.jar 無法處理
但是直接在命令列卻又可以.. = =
我是習慣都存成 NO BOM 格式
所以都一直沒想到會是這個問題造成的
在指令列加入 --charset utf-8 就解決了

Yamaka · « **回覆 #16 於:** 2009-10-09 02:06 »

最近將 getJSGZip 功能弄成可以組合多個 js 檔成一個 gzjs 檔
在編寫 js 時便可以將不同功用的 js 碼分開檔案存放
瀏覽網頁時則只需要下載一個壓縮過的 gzjs, 不用各別載入 js 檔
這樣也不會因為太多個 js 檔而造成開個網頁要開好多個 apache session
目前是使用傳參數的方式傳入多個 js 檔處理
還在想有沒有其他更好的方式...

TyroneYeh · « **回覆 #17 於:** 2009-10-09 07:50 »

組合起來會有差很多嗎？
如果是一樣的原理，這樣那圖片檔是不是也整合起來會比較好
在用圖片定位語法區分圖片的顯示！看過有這樣做的
就是好幾個 Icon 是同一個檔案，用 CSS 來取不同座標的圖
這樣下載圖示不就只要下載一個！！！

如果效能真的差很多的話，是不是都要這樣做呢？

micmic3 · « **回覆 #18 於:** 2009-10-09 09:11 »

引述: TyroneYeh 於 2009-10-09 07:50

組合起來會有差很多嗎？
如果是一樣的原理，這樣那圖片檔是不是也整合起來會比較好
在用圖片定位語法區分圖片的顯示！看過有這樣做的
就是好幾個 Icon 是同一個檔案，用 CSS 來取不同座標的圖
這樣下載圖示不就只要下載一個！！！

如果效能真的差很多的話，是不是都要這樣做呢？

要這麼做的原因是...動態效果的換圖以前都用js 寫
但要把 a 圖->b圖
b 要先 preload 不然效果不好
用css 放在同一張就不用preload 了

Yamaka · « **回覆 #19 於:** 2009-10-09 09:37 »

引述: TyroneYeh 於 2009-10-09 07:50

組合起來會有差很多嗎？
如果是一樣的原理，這樣那圖片檔是不是也整合起來會比較好
在用圖片定位語法區分圖片的顯示！看過有這樣做的
就是好幾個 Icon 是同一個檔案，用 CSS 來取不同座標的圖
這樣下載圖示不就只要下載一個！！！

如果效能真的差很多的話，是不是都要這樣做呢？

我沒做精確的測試啊~ 以肉眼觀察的結果是:
本來網頁除了幾個連到google抓jquery之外~
還有3個js, jquery.blockUI.js, jquery.dockPanel.js, myjs.js
每次開網頁並看主機的top畫面都會跑出4~6個 apache
改用組合式js將上面這3個包在一起acapch都只剩1~3個
而且cpu的負載並沒有增加...
再強調一次哦~~
我只是以肉眼觀察top裡的apache數量與cpu負載~

Yamaka · « **回覆 #20 於:** 2009-10-09 09:42 »

引述: micmic3 於 2009-10-09 09:11

引述: TyroneYeh 於 2009-10-09 07:50
組合起來會有差很多嗎？
如果是一樣的原理，這樣那圖片檔是不是也整合起來會比較好
在用圖片定位語法區分圖片的顯示！看過有這樣做的
就是好幾個 Icon 是同一個檔案，用 CSS 來取不同座標的圖
這樣下載圖示不就只要下載一個！！！

如果效能真的差很多的話，是不是都要這樣做呢？
要這麼做的原因是...動態效果的換圖以前都用js 寫
但要把 a 圖->b圖
b 要先 preload 不然效果不好
用css 放在同一張就不用preload 了

jQuery-ui 的 theme 就是這麼做的啊
看看他的 css 的設定就知道了~
幾張小圖組合起來, 一定會比各自傳輸好啊~
不過也要考慮到組合之後是否留有太多空白
空白也會造成檔案變大
那效能就不一定真的會比較好了

TyroneYeh · « **回覆 #21 於:** 2009-10-10 02:01 »

ajax 的資料傳輸有沒有壓縮方法啊！
用 json 格式傳遞資料是比 xml 來的少標籤
這部份大家都怎麼做呢？有什麼壓縮方法嗎？

Yamaka · « **回覆 #22 於:** 2009-10-10 02:19 »

引述: TyroneYeh 於 2009-10-10 02:01

ajax 的資料傳輸有沒有壓縮方法啊！
用 json 格式傳遞資料是比 xml 來的少標籤
這部份大家都怎麼做呢？有什麼壓縮方法嗎？

我有試過 server 傳 gzip 資料過來
不過資料傳過來之後並沒有解壓縮
不知道是不是設定錯誤..

jQuery 的設定:

代碼: [選擇]

$.ajaxSetup({
  'beforeSend': function(srh) {srh.setRequestHeader("Accept-Encoding", "gzip, deflate")}
  //acceptEncoding: "gzip, deflate"
});

$.get(...);

這兩天再來玩看看

Yamaka · « **回覆 #23 於:** 2011-11-03 10:19 »

這兩天突然出現一種狀況, 某支 js 檔的內容明明就已經更新了
可是瀏覽網頁時下載的 js 碼卻一直都還是更新前的碼
本來都正常是突然就出問題, 所以也不是 cache 的問題
而且試了其他 js 檔卻還是正常的...一時間也不知道怎麼回事..
查了 templates_c 資料夾, 新的 gzjs 檔沒被編譯出來
後來查 web server 的 log 發現下面訊息

引用

[ERROR] 15:16:missing } after property list

[ERROR] 17:15:missing ; before statement

[ERROR] 18:6:syntax error

[ERROR] 1:0:Compilation produced 3 syntax errors.
org.mozilla.javascript.EvaluatorException: Compilation produced 3 syntax errors.
   at com.yahoo.platform.yui.compressor.YUICompressor$1.runtimeError(YUICompressor.java:135)
   at org.mozilla.javascript.Parser.parse(Parser.java:410)
   at org.mozilla.javascript.Parser.parse(Parser.java:355)
   at com.yahoo.platform.yui.compressor.JavaScriptCompressor.parse(JavaScriptCompressor.java:312)
   at com.yahoo.platform.yui.compressor.JavaScriptCompressor.<init>(JavaScriptCompressor.java:533)
   at com.yahoo.platform.yui.compressor.YUICompressor.main(YUICompressor.java:112)
   at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
   at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
   at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
   at java.lang.reflect.Method.invoke(Method.java:597)
   at com.yahoo.platform.yui.compressor.Bootstrap.main(Bootstrap.java:20)

原來是 js 碼有語法錯誤(逗號打成分號), 造成 yuicompressor 編譯失敗

最新消息:

作者 主題: [分享] yuicompressor-2.4.2 壓縮 javascript (閱讀 15609 次)

作者主題: [分享] yuicompressor-2.4.2 壓縮 javascript (閱讀 15609 次)