現(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ò)誤

使用方法：

<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

LoadModule concatx_module modules/mod_concatx.dll

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

<IfModule concatx_module>
ConcatxDisable Off
ConcatxCheckModified On
ConcatxSeparator On
ConcatxMaxSize 1024
ConcatxMaxCount 10
ConcatxFileType js,css
</IfModule>

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

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處理）

更多Windows下使用apache模塊實(shí)現(xiàn)合并多個(gè)js、css提高網(wǎng)頁(yè)加載速度相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！