服務(wù)端合并和壓縮JavaScript和CSS文件

1、服務(wù)端合并和壓縮javascript和css文件web性能優(yōu)化最佳實(shí)踐中最重要的一條是削減http哀求，它也是yslow中比重最大的一條規(guī)章。削減http哀求的計(jì)劃主要有合并javascript和css文件、css sprites、圖像映射（image map）和用法data uri來(lái)編碼。css sprites和圖像映射現(xiàn)在已經(jīng)隨處可見(jiàn)了，但因?yàn)閕e6和ie7不支持data uri以及性能問(wèn)題，這項(xiàng)技術(shù)尚未大量用法。目前大部分網(wǎng)頁(yè)中的javascript和css文件數(shù)量和開(kāi)發(fā)時(shí)全都，少量的網(wǎng)頁(yè)會(huì)按照實(shí)際狀況實(shí)行本地合并，這些合并中相當(dāng)多的是有挑選地手動(dòng)完成，每次新的合并都需要重新在本地完成并

2、上傳到服務(wù)器，比較的任意和繁瑣，同樣文件的壓縮也有類似的狀況。而利用服務(wù)端的合并和壓縮，我們就可以根據(jù)開(kāi)發(fā)的規(guī)律盡可能讓文件的顆粒度變小，利用網(wǎng)頁(yè)中url的規(guī)章來(lái)自動(dòng)實(shí)現(xiàn)文件的合并和壓縮，這會(huì)相當(dāng)?shù)撵`便和高效。一、yui combo handler2008年7月yui team宣布在yahoo! cdn上對(duì)yui javascript組件提供combo handler服務(wù)。combo handler是yahoo!開(kāi)發(fā)的一個(gè)apache模塊，它實(shí)現(xiàn)了開(kāi)發(fā)人員容易便利地通過(guò)url來(lái)合并javascript和css文件，從而大大削減文件哀求數(shù)。比如在頁(yè)面上用法yui2的rich text edito

3、r組件>需要引入多個(gè)javascript文件，常用方式如下：而用法combo handler服務(wù)之后，則上述的代碼可以寫(xiě)為：除了代碼的可讀性稍稍有一點(diǎn)點(diǎn)降低外，用法combo handler服務(wù)大大的降低了http哀求數(shù)，同時(shí)也削減了url代碼量，這對(duì)于web性能優(yōu)化來(lái)講至關(guān)重要。所以，隨后yui從2.6.0開(kāi)頭，其核心組件yui loader內(nèi)置了combo handling功能，即用法yui loader時(shí)，通過(guò)配置combine屬性就可以把要加載的多個(gè)javascript或css文件根據(jù)用法combo handler服務(wù)的形式合并起來(lái)，這時(shí)只要靜態(tài)文件的服務(wù)器支持combo han

4、dler就行了。在yui中當(dāng)combine配置為true時(shí)，cdn默認(rèn)是用法yahoo! cdn（），所以沒(méi)有任何問(wèn)題。這正是yui最誘人的地方之一。圓滿的是在中國(guó)的速度并不佳，原來(lái)中國(guó)雅虎提供了 ，但尚未提供combo handler服務(wù)，同時(shí)因種種緣由，其更新在yui 2.7.0之后就停滯了。更糟糕的是yahoo!開(kāi)發(fā)的支持combo handler的apache模塊雖然據(jù)傳有方案開(kāi)源，但起碼現(xiàn)在依然是私有技術(shù)，要用法就需要自己實(shí)現(xiàn)類似功能，所以國(guó)內(nèi)類似技術(shù)的應(yīng)用并不太多。二、minify在google code上有一個(gè)php的開(kāi)源項(xiàng)目叫minify它可以合并、精簡(jiǎn)、gzip壓縮和緩存ja

5、vascript和css文件。其文件合并功能就十分類似combo handler，只不過(guò)url的語(yǔ)法略微有點(diǎn)不同。假如yahoo! cdn安裝了minify，那么上面rich text editor的代碼用minify的默認(rèn)格式來(lái)寫(xiě)就是：1）用法minify本地用法minify很容易，只需要apache + php環(huán)境就ok了： 安裝好apache + php (windows、mac)。 下載minify源碼，解壓，然后把min文件夾復(fù)制到指定的根名目下，比如localhost。這時(shí)url的寫(xiě)法也許是http:/localhost/min/f= 啟用apache的mod rewrite模塊，

6、然后在min文件夾下新建.htaccess文件，并添加rewrite規(guī)章1。假如不啟用mod rewrite功能，則minify的url會(huì)類似http:/localhost/min/index.php?f=，這對(duì)客戶端和中間服務(wù)器的緩存不利，而啟用了mod rewrite之后的url類似http:/localhost/min/f=，不僅解決前面問(wèn)題且更短。 配置minify，即編輯min/config.php文件2 用法minify比如，有兩個(gè)javascript文件，http:/localhost/example/a.js,http:/localhost/example/b.js，那么用法m

7、inify合并的url是http:/localhost/min/f=/example/a.js,/example/b.js，挺直把這個(gè)url放到頁(yè)面中就可以用法了。事實(shí)上minify不僅僅實(shí)現(xiàn)了合并功能，同時(shí)默認(rèn)在合并的同時(shí)還會(huì)對(duì)文件舉行精簡(jiǎn)壓縮，假如你在本地本身就對(duì)文件舉行壓縮了，比如用法yui compressor，那么可以在config.php中舉行如下設(shè)置取消minify的壓縮以提升性能3,假如服務(wù)端支持java，那么也可以對(duì)minify舉行容易配置而實(shí)現(xiàn)利用yui compressor壓縮javascript和css文件。挺直在服務(wù)端舉行合并和壓縮，這十分的靈便，也極大的減輕了前端開(kāi)

8、發(fā)成績(jī)的部署過(guò)程，真使事半功倍。更多配置請(qǐng)看rewriteengine on you may need rewritebase on some serversrewritebase /min rewrite urls like "/min/f=." to "/min/?f=."rewriterule (bfg=.*) index.php?$1 l,ne 2config$min_enablebuilder = true;/本地用法時(shí)可以通過(guò)http:/dwn/min/builder/來(lái)舉行配置，外部用法時(shí)請(qǐng)?jiān)O(shè)置為false/

9、$min_cachepath = 'c:/windows/temp'/$min_cachepath = '/tmp'/$min_cachepath = preg_replace('/d+;/', '', session_save_path();/挑選其一，去掉注釋設(shè)置暫時(shí)緩存名目，這樣可以削減程序運(yùn)算提高性能$min_serveoptions'maxage' = 1800;/設(shè)置掃瞄器緩存的時(shí)光，為了提升性能建議這個(gè)時(shí)光設(shè)置盡可能的長(zhǎng)，比如315360000/假如需要在不轉(zhuǎn)變url的狀況下更新靜態(tài)文件，可以采納類似時(shí)光戳的方式，/如http:/localhost/min/f=example/example.css&20100601.css/建議靜態(tài)文件采納版本號(hào)管理，每次修改都需要升級(jí)版本號(hào)，這樣就無(wú)需時(shí)光戳了，/如http:/localhost/min/f=example/example_1_0_1.css$min_serveoptions'minapp''maxfiles' = 10;/參數(shù)f獵取參數(shù)的個(gè)數(shù)，即合并的文件個(gè)數(shù)，這個(gè)數(shù)量徹低可以增大，比如50，/固然可能會(huì)碰到url最大值問(wèn)題，后會(huì)有說(shuō)明3$min_s