快捷導(dǎo)航

Windows下使用apache模塊實(shí)現(xiàn)合并多個(gè)js、css提高網(wǎng)頁(yè)加載速度

更新時(shí)間：2015年01月30日 10:47:43 投稿：junjie

這篇文章主要介紹了Windows下使用apache模塊實(shí)現(xiàn)合并多個(gè)js、css提高網(wǎng)頁(yè)加載速度,本文使用的模塊是基于mod_concat自己修改的,需要的朋友可以參考下

現(xiàn)在的網(wǎng)站表現(xiàn)力越來(lái)越豐富，頁(yè)面加載的js和css自然也越來(lái)越多。當(dāng)網(wǎng)站頁(yè)面上的js和css太多，瀏覽器打開(kāi)頁(yè)面的速度就會(huì)很慢，明顯降低了用戶的體驗(yàn)。使用mod_concatx, 可以合并多個(gè)文件在一個(gè)http響應(yīng)報(bào)文中，可以有效提高js/css的加載速度。

示例效果如下：

mod_concatx模塊是在mod_concat基礎(chǔ)上修改的，感謝他們的工作。

原有的mod_concat模塊有很大的參考價(jià)值，但實(shí)際作用不大。

該模塊存在以下三個(gè)問(wèn)題：

1、每次都會(huì)重新向客戶端發(fā)數(shù)據(jù)，沒(méi)有合理利用瀏覽器緩存
2、存在安全漏洞，導(dǎo)致服務(wù)端程序被下載，比如"/??jquery.js,common.php"
3、合并每個(gè)文件時(shí)中間沒(méi)間隔，導(dǎo)致內(nèi)容粘連在一起，可能引起錯(cuò)誤

所以我在mod_concat基礎(chǔ)上寫(xiě)了mod_concatx模塊，解決了前面提到的一些問(wèn)題。

下載地址：http://xiazai.jb51.net/201501/other/mod_concatx-140709.rar（內(nèi)附源碼，dll，更新了Apache2.2/2.4 64位版）

Google托管地址：http://code.google.com/p/apmod/

使用方法：

復(fù)制代碼代碼如下:

<link href="/style/??css1.css,css2.css,css3.css" type="text/css" rel="stylesheet"/>

<script src="/js/??js1.js,js2.js,js3.js,js4.js" type="text/javascript"></script>

模塊配置：

打開(kāi)apache配置文件httpd.conf

復(fù)制代碼代碼如下:

LoadModule concatx_module modules/mod_concatx.dll

高級(jí)配置：（以下是默認(rèn)配置，可以不配置）

復(fù)制代碼代碼如下:

<IfModule concatx_module>

ConcatxDisable Off

ConcatxCheckModified On

ConcatxSeparator On

ConcatxMaxSize 1024

ConcatxMaxCount 10

ConcatxFileType js,css

</IfModule>

詳細(xì)說(shuō)明：

復(fù)制代碼代碼如下:

ConcatxDisable On/Off
//是否使用mod_concatx模塊

ConcatxCheckModified On/Off
//檢查文件是否改動(dòng)，建議On

ConcatxSeparator On/Off
//合并文件時(shí)是否加換行分隔，建議On

ConcatxMaxSize 數(shù)字
//合并文件總大小限制最大值，建議不要太大

ConcatxMaxCount 數(shù)字
//合并文件總個(gè)數(shù)限制最大值，建議不要太大

ConcatxFileType js,css
//合并文件類(lèi)型限制，如不限制填","

最后語(yǔ)：
建議自己編譯這個(gè)模塊，安全放心

后期改進(jìn)方向：
todo:考慮加入js,css壓縮
todo:考慮支持zend解析后的文件
bug:目錄存在默認(rèn)頁(yè)加載異常（考慮上層hook處理）

如果加載模塊后apahce無(wú)法啟動(dòng)，請(qǐng)安裝vc10運(yùn)行庫(kù)，下載地址
http://www.microsoft.com/en-us/download/details.aspx?id=5555

您可能感興趣的文章: