Windows下使用apache模塊實現合并多個js、css提高網頁加載速度

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

這篇文章主要介紹了Windows下使用apache模塊實現合并多個js、css提高網頁加載速度,本文使用的模塊是基于mod_concat自己修改的,需要的朋友可以參考下

現在的網站表現力越來越豐富，頁面加載的js和css自然也越來越多。當網站頁面上的js和css太多，瀏覽器打開頁面的速度就會很慢，明顯降低了用戶的體驗。使用mod_concatx, 可以合并多個文件在一個http響應報文中，可以有效提高js/css的加載速度。

示例效果如下：

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

原有的mod_concat模塊有很大的參考價值，但實際作用不大。

該模塊存在以下三個問題：

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

所以我在mod_concat基礎上寫了mod_concatx模塊，解決了前面提到的一些問題。

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

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

使用方法：

復制代碼代碼如下:

<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>

模塊配置：

打開apache配置文件httpd.conf

復制代碼代碼如下:

LoadModule concatx_module modules/mod_concatx.dll

高級配置：（以下是默認配置，可以不配置）

復制代碼代碼如下:

<IfModule concatx_module>

ConcatxDisable Off

ConcatxCheckModified On

ConcatxSeparator On

ConcatxMaxSize 1024

ConcatxMaxCount 10

ConcatxFileType js,css

</IfModule>

詳細說明：

復制代碼代碼如下:

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

ConcatxCheckModified On/Off
//檢查文件是否改動，建議On

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

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

ConcatxMaxCount 數字
//合并文件總個數限制最大值，建議不要太大

ConcatxFileType js,css
//合并文件類型限制，如不限制填","

最后語：
建議自己編譯這個模塊，安全放心

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

如果加載模塊后apahce無法啟動，請安裝vc10運行庫，下載地址
http://www.microsoft.com/en-us/download/details.aspx?id=5555

您可能感興趣的文章: