2014年7月3日

壓縮JavaScript的好工具 - Closure Compiler


enter image description here


一切都是為了使用者體驗


大家滑手機的時候一定最討厭界面卡頓的感覺,圖片或內容可以晚點呈現(甚至跳過也沒關係),但爽快地滑動界面是神聖不可侵犯的使用者特權,只要可以暢快地讓人滑手機就是好App了。我有時候覺得這已經完全改變了我們的世界,例如我家巷口那原本繁忙的早餐店,現在已經鮮少聽到顧客等待早餐製作的不耐抱怨聲,因為大部份的等待時間已經被滑手機給撫慰了,反而覺得“咦!最近老闆煎蛋餅的時間變快了啊 ^^? ”。
因此在偉大的使用者經驗的考量下,無論是Web或APP開發,大家最怕的就是網路塞車或是大量I/O下造成操作的遲鈍,因為使用者通常只要愉悅的瀏覽被打斷幾次,很可能就直接按下home鍵離開了。


如何提升網路服務的效率


Web Design更是受到此一嚴峻的考驗,在先天限制下,Web的運作效能本來就無法跟native application相比,更何況其完整內容+部分程式需要先透過網路傳輸到使用者端的裝置上,雖說為了避免操作上的遲鈍,UI的設計通常會將厚重的動作以非同步的背景方式處理(例如資料查詢或是圖片的下載),但是如果是連UI本身的程式(JavaScript)都需要花大量時間從伺服器下載,那就真的無藥可救了,無論我們提供如何良好的UI設計,使用者都只有等待的份。
為了快速有效地利用頻寬來提供良好的服務,服務提供者通常會先針對其JavaScript進行壓縮來避免上述的問題,希望能在使用者開啟網頁的時候,重要資料可以以最快速的方式下載到瀏覽器上。Google在這方面提供了一個相當實用的壓縮工具:Closure Compiler



Closure Compiler


Closure Compiler是一個JavaScript壓縮器,除了將多餘的空格換行符號及註解移除之外,也會檢視多餘的程式變數,甚至也會會像Java的obfuscate處理一樣,將過長的名稱轉換成一個簡短的名字,Clouse Compiler有許多種使用方式,其中一種是直接在網頁上Compile你的JavaScript,如下圖所示,頁面工具分成左右兩部分,在左方欄位貼上Script內容後按下Compile按鈕,便可以於右方得到處理後的內容。

http://closure-compiler.appspot.com/home

以下Compile前的原始JavaScript範例:
 // ADD YOUR CODE HERE
function hello(name) {
var useless_variable = 'test'
alert('Hello, ' + name);
}
hello('New user');

Compile後的結果為:
function hello(a){alert("Hello, "+a)}hello("New user");
嘗試著執行上方這個範例,我們可以發現Compile後,第三行的useless_variable變數會直接被移除,其餘的註解及空格符號也會被拿掉,剩下來才是真正有用的Script,結果已經簡潔許多。

以Github上的cocos2d-html5專案為例,專案目錄的cocos2d目錄下面共有161個js檔案,原本大小約為2.4MB,經過Clouse Compiler壓縮後,則變為1.1MB,接下來我們便可以拿這個簡短後的JavaScript進行產品部署作業。

$ du -csh ./cocos2d_compiled/ ./cocos2d/
1.0M ./cocos2d_compiled/ (壓縮後檔案)
2.3M ./cocos2d/ (原始檔案)


將一切都自動化吧!


當然我們不用每次編寫JavaScript就親力親為的把內容上傳到上述的網站進行壓縮作業,Clouse Compiler也有提供Command line的執行方式,我們可以從這裡Download一個compiler.jar ,透過java的方式便可以針對指定的JavaScrip檔案進行處理。
執行命令的範例如下:
java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js
或者搭配batch or shell script批次把專案的所有JavaScript全都壓縮過一次:
#!/bin/bash
files="$(find ./myproject -iname *.js)"
for X in $files
do
echo 'processing>>'$X
java -jar compiler.jar --js $X --js_output_file $X
done

如果本身專案有使用如Jenkins的CI tool (Continuous Integration),便可以將此一步驟整合至專案的建置流程之中,讓專案有條不紊的進行下去。一般來說,我們會希望SCM Server上是完整的JavaScript原始檔以方便日後開發除錯,因此不建議將壓縮過的JavaScript放回SCM Server,所以通常程序會是:

Get source code from SCM Server -> Compile JavaScript -> testing -> deploy Project

一旦將Clouse Compile整合進Jenkins之後,我們便可方便地在每次程式改版時進行壓縮處理,還可以直接在網頁上檢視其結果。

enter image description here

Clouse tool還能做什麼


除了幫忙壓縮JavaScript之外,Google的這一套Clouse tool也有其他非常實用的功能,我們可以拿它來作為Code Review的基礎,透過這個工具來檢視Script中的潛在的issue。
  • Closure Compiler - A JavaScript optimizer,也就是此篇文章所介紹的JavaScript壓縮工具
  • Closure Linter - A JavaScript style checker and style fixer,Linter是一種靜態程式碼分析工具,可以檢視程式碼中一些容易忽略的錯誤,也可以針對程式碼撰寫風格進行檢查,如果專案團隊有定義共同的coding conventions,便可以透過此種工具好好規範一下大家的寫作性格,畢竟寫程式不像寫詩,次意揮灑的結果通常不易團隊合作啊!
  • Closure Stylesheets - An enhanced stylesheet language,此工具可以讓開發者透過用variable、function的方式來編輯網頁layout,這邊稱為.gss檔案,夠過此一工具再轉換成標準的CSS檔案,如此一來,CSS的編輯及管理更具彈性。
此外,這套工具中還包含下方兩個實用的程式庫,這些功能皆俱有server agnostic的特色,也就是並不相依於特定Server or framework,我們可以拿它來實作於各種Web專案而不用擔心相容問題。
  • Closure Templates - An easy templating system for both Java & JavaScript
  • Closure Library - A comprehensive JavaScript library


目前無論是哪一種web技術,JavaScript作為網頁效果或是呈現網頁應用程式的方式正被廣泛地使用, 許多受歡迎的Web Framework幾乎都是這種直譯式語言+JavaScript的解決方案。如果我們已經費勁心思設計好應用程式,但只是因為在最後一哩的地方造成使用者體驗不佳,那真是前功盡棄,事倍功半了,現在就趕快為你的web專案建立JavaScript最佳化機制吧!

沒有留言:

張貼留言