壓縮JavaScript的好工具 - Closure Compiler

一切都是為了使用者體驗

大家滑手機的時候一定最討厭界面卡頓的感覺，圖片或內容可以晚點呈現(甚至跳過也沒關係)，但爽快地滑動界面是神聖不可侵犯的使用者特權，只要可以暢快地讓人滑手機就是好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按鈕，便可以於右方得到處理後的內容。



以下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之後，我們便可方便地在每次程式改版時進行壓縮處理，還可以直接在網頁上檢視其結果。

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最佳化機制吧！