網頁傳輸效率提升1 – Google 提供的 Javascript 壓縮

這篇文章主要針對的效率問題是網路傳輸上的問題。
當然不是教你說有什麼樣的秘技,可以讓你申請的1M 的網路變成 1.5M這樣夢幻的事情。因為就算真有辦法可以達成,也會是不合法的方法。
而且這裡針對的效率修改法,也不是針對使用者的狀況去說的。而是服務的提供者來說的。如何有效的利用有限的頻寬來提供給到多人使用到你的服務。
很簡單的是我在創作 http://bgo.tw 的時候,在閱讀網路上眾多服務提供者的經驗談的時候,知道了網路流量是很沉重很沉重的一個負擔。


當使用者開啟你的網頁時候,就會傳輸一堆的資料給使用者讓瀏覽器可以呈現你的期望。
而在現在網頁效果的發展下,Javascript 成為很重要的一項技術。所以大家的網站上都會有或多或少的 Javascript 程式。而有更多的是現成的套件來利用。這些東西很可能你都不會去修改,所以方不方便看懂他就不是重點了。而是讓檔案越小傳輸速度越快,使用者越快取得東西可以呈現才是重點。而且越小的檔案也會讓你的流量壓力比較小一點點。

這時候 Google 就位我們提供一個好用的服務。
Closure Compiler
Closure Compiler
就是一套 Javascript 的編譯器,他就是會當我們檢查一下有沒有多餘的東西,有的話就幫我們替除掉。如果使用進階一點的設定,他還會幫我們將變數或函數的名稱簡短一下。讓整體的大小下降很多。

實際上場看看效果,就讓我以 jQuery 1.4.2 版本來做說明啦。
原始大小:160.01KB (45.04KB gzipped)
取代多於字符(Whitespace only):95.91KB (27.37KB gzipped)
簡單變數簡化(Simple):70.15KB (23.86KB gzipped)
再進化壓縮(Advanced):63.14KB (22.61KB gzipped)
這裡取的原始版本是一般的版本,就是可以輕鬆閱讀程式碼的狀態之版本。

一般來說建議使用第二個選項,Simple版本就好。因為使用到進階版的話出錯的機率就有一點高,不是說程式轉換上的出錯,而是多檔案之間相互呼叫的問題會出現。

這時候,你會發現我在檔案大小的地方多加了一個 gzipped 的數據,這就是將檔案利用 gz 的技術壓縮,這是一個在瀏覽器上很常見的技術,用於壓縮檔案後再行傳輸,一樣目的就是要使檔案縮小,可以更快速的傳遞到使用者手上。
這部分就下一次再說,因為夜已經深了,該睡覺了。