在Web項目的開發中,js,css文件會隨著項目的開發變得越來越多,越來越大,這就給給性能方面帶來一些問題,如,頁面引入的的js,css越多的話,那么對就增加了http請求數,解決該問題的一個好的方法就是合并js,css文件。
下面就簡單介紹一個方法,十分簡單.下面介紹以合并js文件為例
(1) G.js文件
~function(){
window.G={};
G.Method={
add:function(){ alert(111);}
,sub:function(){ alert("減法");}
};
}();
(2) T.js文件
var T=(function(){
return {
t1:function(){alert("t1 method!")}
,t2:function(){alert("t2方法!")}
,sum:function(obj){return obj.x+obj.y;}
};
}());
上面列出了連個簡單的js文件,下面就要寫一個批處理文件來合并以上文件了
(3) 合并js,css文件的批處理方法,文件名假設命名為 debug.bat
copy G.js+T.js GT_bin.js /b
說明:
(1) 輸入要合并的js文件,保存debug.bat文件,運行debug.bat即可.
(2) 就這么一行代碼就搞定了，十分簡單,GT_bin.js 為合并之后的文件名稱 , /b是固定參數,文件合并之后,頁面就只引用GT_bin.js就可以了,從而減少了js文件的引用,到達了減少http請求的次數,提高了網站的性能.
(3) 合并css文件方法也是如此。
YSlow會告訴我們，合并所有的js和css文件可以減少HTTP請求，這樣能提升訪問速度。
通常為了開發的方便，我們會把js按用途分類，這樣就會有很多js文件，比如sablog的jscript文件夾里就有10幾個文件，這樣訪問的時候就是10幾個HTTP請求。
那么解決辦法就是合并它們，對吧。可是這樣有一個問題就是你需要保存所有文件的源文件，并且有修改的時候又要從新合并一次。
實際上我們可以更簡單一點，讓php去合并這些文件吧，同時我們也不用操心壓縮這檔子事了。這里就要提到一個開源的php項目，名字叫做Minify，它可以幫助你合并，精簡，壓縮和緩存Javascript以及CSS文件。
Minify的使用非常簡單：
1. 把下載到的源碼解壓縮，把其中的min文件夾復制到Apache的DOCUMENT_ROOT目錄下，即你的網站跟目錄。
2. 然后打開min/config.php文件，注意下面一些選項
$min_serveOptions['maxAge'] = 1800; |
$min_serveOptions['minApp']['maxFiles'] = 10; |
3. 下面你可以打開http://yourdomain/min/builder/，這里有一個工具可以幫助你生成引用URL。填好你要合并的js或css文件，點擊Update，下面會給出引用代碼，類似這個樣子
<script type="text/javascript" src="/min/b=sa2/include&f=jscript/show.js,jscript/jquery.js,jscript/common.js, |
jscript/ajax.js,jscript/fiximage.js,syntaxhighlighter/scripts/shCore.js, |
syntaxhighlighter/scripts/shBrush.js&20100724"></script> |
把它放到你的<head></head>標簽里，刪掉原先的一堆腳本引用，好了，現在訪問你的網站只有一個HTTP請求了。
4. 你可能會嫌上面的URL是不是太長了點，當然我們還有更好的方法，并且效率會更高。我們可以使用g參數
這個方法需要在min/groupsConfig.php里進行設置，比如剛才的那一堆js可以寫成這樣
'js' => array('//sa2/include/syntaxhighlighter/scripts/shCore.js', |
'//sa2/include/syntaxhighlighter/scripts/shBrush.js', |
'//sa2/include/jscript/show.js', |
'//sa2/include/jscript/jquery.js', |
'//sa2/include/jscript/fiximage.js', |
'//sa2/include/jscript/common.js', |
'//sa2/include/jscript/ajax.js') |
這段代碼也是可以用上面提到的builder來生成的。
這樣在你的網頁中就只需要這樣來引用了
<script type="text/javascript" src="/min/g=js&20100724"></script> |
看起來簡潔許多吧~
