|
5. 使用Minify
比如，有兩個JavaScript文件，http://localhost/example/a.js,http://localhost/example/b.js，那么使用Minify合并的URL是http://localhost/min/f=/example/a.js,/example/b.js，直接把這個URL放到頁面中就可以使用了。
實際上Minify不僅僅實現(xiàn)了合并功能，同時默認(rèn)在合并的同時還會對文件進行精簡壓縮，如果你在本地本身就對文件進行壓縮了，比如使用YUI Compressor，那么可以在config.php中進行如下設(shè)置取消Minify的壓縮以提升性能：
$min_serveOptions['minifiers']['application/x-javascript'] = '';
$min_serveOptions['minifiers']['text/css'] = '';
如果服務(wù)端支持Java，那么也可以對Minify進行簡單配置而實現(xiàn)利用YUI Compressor壓縮JavaScript和CSS文件。
直接在服務(wù)端進行合并和壓縮，這非常的靈活，也極大的減輕了前端開發(fā)成果的部署過程，真使事半功倍。更多配置請看Minify CookBook和Wiki
在YUI3中使用Minify
在YUI2中，合并機制只支持庫本身的文件，自定義的文件會單獨一一加載。從YUI3開始，模塊變得更小，這樣就導(dǎo)致使用合并時URL會變長，但在IE下URL的最大值是2083，Apache默認(rèn)的URL最大值是8192，所以當(dāng)URL在對應(yīng)瀏覽器下超出最大值時，YUI3會自動根據(jù)瀏覽器判斷進行拆分成多個合并的URL，并且還提供maxURLLength來設(shè)置最大值。而從YUI3.1.0開始，不僅僅支持自定義文件的合并，還支持可以使用多個提供合并服務(wù)的CDN，即可以對YUI組件使用http://yui.yahooapis.com這個CDN，其余文件使用其他支持合并的CDN，這樣非常的實用、方便和靈活。示例在YUI3中使用Minify就說明了這點。
由于YUI默認(rèn)URL的合并形式和Minify的不相同，所以在YUI實例化時需要利用正則替換來實現(xiàn)YUI3支持Minify的URL合并形式，但這種方式既不靈活，且有風(fēng)險，不友好又效率低。比較簡單的方式是直接修改YUI 3的源碼，如示例在修改后的YUI3中使用Minify。同時，YUI 3.1.*的版本有一個bug，即同時合并JavaScript和CSS時，較短的那個URL結(jié)尾處多一個&符號，如示例在YUI3中使用Minify中：
http://yui.yahooapis.com/combo?3.1.1/build/
widget/assets/skins/sam/widget.css&
3.1.1/build/console/assets/skins/sam/console.css&
http://dancewithnet.com/min/b=yui&f=3.1.1/
tabview/assets/skins/sam/tabview.css&
這兩種都可以使用，雖然在早期的IE瀏覽器版本（如IE6）中會有無法解析的風(fēng)險，且影響某些特定情況下的緩存，但當(dāng)使用修改后的YUI時，合并的URL變成類似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的樣子，就會出現(xiàn)bug了。對于YUI的Combo Handler來說這是一個小bug，所以YUI3把這個bug設(shè)置為P5。但當(dāng)我們改造YUI3來更好的支持Minify時，還要解決這個問題，具體方案請看示例在修改后的YUI3中使用Minify。
在CDN上使用Minify
CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其最常應(yīng)用就是通過位于不同地理位置的服務(wù)器把靜態(tài)資源部署到用戶最近的邊緣，這樣能有效解決Web服務(wù)中大量靜態(tài)資源的速度和性能問題。由于實施成本比較高，所以在實際的應(yīng)用中，大型公司一般會組建自己的CDN，而小型公司只能租借第三方的CDN，但不管怎樣這兩種方式都不會影響在服務(wù)端實施合并和壓縮程序。一般情況下，靜態(tài)資源也并不是直接上傳到CDN，而是先傳到一臺后臺服務(wù)器，然后各地CDN的前端Cache服務(wù)器按需索取。YUI CDN的Combo Handler就是部署在其后臺服務(wù)器上的，Minify也應(yīng)如此。簡單圖示如下：
當(dāng)一個資源請求到CDN時，CDN會先檢查本地是否存在這個資源，如果有則會直接返回該資源，如果沒有則會請求其后臺服務(wù)器，后臺服務(wù)器會依據(jù)資源URL的信息進行相應(yīng)的處理，然后返回給CDN，CDN就會存儲這個資源，再次出現(xiàn)這個資源請求時就無需請求后臺服務(wù)器了。所以，雖然合并特別是壓縮JavaScript和CSS文件是消耗時間的，但是由于只需要第一次，并且第一次基本上由我們自己訪問掉（我們可以創(chuàng)建程序自動進行一次訪問來保證，實際上圖片優(yōu)化也可以采用這種方式），所以基本上很安全。這正是目前在口碑網(wǎng)實施的JavaScript和CSS合并方案，在第4屆D2的《前端性能優(yōu)化和自動化》中也介紹了它。
原文：http://dancewithnet.com/2010/06/08/minify-js-and-css-files-in-server/
本文鏈接：http://www.95time.cn/tech/web/2010/7683.asp 
出處：隨網(wǎng)之舞
責(zé)任編輯：bluehearts
上一頁 服務(wù)端合并和壓縮JS和CSS文件 [2] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 服務(wù)端合并和壓縮JS和CSS文件 [3]
