服務端合併和壓縮JS和CSS文件

作者：Eve Cole 更新時間：2010-06-14 18:58:46

2在服務端合併和壓縮JavaScript和CSS文件

Web效能優化最佳實務中最重要的一條是減少HTTP請求，它也是YSlow中比重最大的一條規則。減少HTTP請求的方案主要有合併JavaScript和CSS檔案、CSS Sprites、影像映射（Image Map）和使用Data URI來編碼圖片。 CSS Sprites和圖片映射現在已經隨處可見了，但由於IE6和IE7不支援Data URI以及效能問題，這項技術尚未大量使用。目前大部分網頁中的JavaScript和CSS檔案數量和開發時一致，少量的網頁會根據實際情況採取本地合併，這些合併中相當多的是有選擇地手動完成，每次新的合併都需要重新在本地完成並上傳到伺服器，比較的隨意和繁瑣，同樣檔案的壓縮也有類似的情況。而利用服務端的合併和壓縮，我們就可以按照開發的邏輯盡可能讓文件的顆粒度變小，利用網頁中URL的規則來自動實現文件的合併和壓縮，這會相當的靈活和高效。

YUI Combo Handler

2008年7月YUI Team宣佈在YAHOO! CDN上對YUI JavaScript元件提供Combo Handler服務。 Combo Handler是Yahoo!開發的Apache模組，它實現了開發人員簡單方便地透過URL來合併JavaScript和CSS文件，從而大大減少文件請求數。例如在頁面上使用YUI2的Rich Text Editor元件需要引入多個JavaScript文件，常用方式如下：

而使用Combo Handler服務之後，則上述的程式碼可以寫成：

除了程式碼的可讀性稍微有一點點降低外，使用Combo Handler服務大大的降低了HTTP請求數，同時也減少了URL程式碼量，這對於Web效能最佳化來講至關重要。所以，隨後YUI從2.6.0開始，其核心元件YUI Loader內建了Combo Handling功能，也就是使用YUI Loader時，透過設定combine屬性就可以把要載入的多個JavaScript或CSS檔案依照使用Combo Handler服務的形式合併起來，此時只要靜態檔案的伺服器支援Combo Handler就行了。在YUI中當combine配置為true時，CDN預設是使用Yahoo! CDN（ http://yui.yahooapis.com ），所以沒有任何問題。這正是YUI最迷人的地方之一。

遺憾的是http://yui.yahooapis.com在中國的速度並不佳，本來中國雅虎提供http://cn.yui.yahooapis.com/ ，但尚未提供Combo Handler服務，同時因種種原因，其更新在YUI 2.7.0之後就停滯了。更糟的是Yahoo!開發的支援Combo Handler的Apache模組雖然據傳有計劃開源，但至少現在依舊是私有技術，要使用就需要自己實現類似功能，所以國內類似技術的應用並不太多。