通過minify將項目中js和css文件的打包

減少http請求數,有三個好處,即減少DNS請求所耗費的時間.減少服務器壓力減少http請求頭,因此這是我們前端性能優化的一個關鍵點。

對於我們前端來說減少http請求數的一個途徑就是合併jscss文件稱爲combo,也稱打包,也就是通過將多個文件壓縮合併成一個文件,並緩存在服務器,然後一次性傳輸到客戶端。這樣可以有效地減少網站中所有頁面的http請求數。

經研究發現,Google Code上有一個PHP的開源項目——minify它可以合併、精簡、Gzip壓縮和緩存JavaScriptCSS文件。

Minify的使用主要有以下幾個關鍵點:

1、minifymin文件夾放入站點根目錄下。

2、運行環境:Apache + PHP

3、啓用ApacheMod Rewrite模塊

4、min文件夾下新建.htaccess文件,並在其下添加如下Rewrite規則

    <IfModule mod_rewrite.c>

RewriteEngine on

RewriteRule ^([a-z]=.*)  index.php?$1  [L,NE]

</IfModule>

5、配置Minify,即編輯min/config.php文件,我們主要是設置緩存目錄、緩存時間、可合併文件最大數量,其餘的config.php文件中有叫詳細的註釋,恕不贅述。

6、使用方法:在我本地映射的域名下登錄hoogle.fclub.cn/min就可以將我們需要合併的文件一一添加,update後生成一串地址,如下圖:

  其中b參數爲文件本地目錄,f參數爲jscss文件名。熟悉了後也可以不通過界面update,直接寫出合併後的地址。

  比如我們網站page_header.lbi中的前面8js,現在這8個文件是放在本地,引入時直接用如下代碼就相當與載入了8個jshttp請求變成了一次。

<script type="text/javascript" src="/min/b=skins/js_new&f=jquery-1.4.2.js,utils.js,fclub.js,jquery.scrollTo.js,fclub_index.js,smoothAnchor.js,overlay.min.js,toolbox.expose.min.js,centerDiv.js"></script>

  這樣即可以讓這8js文件合併、精簡然後通過gzip壓縮成一個文件.gz文件並緩存在服務器中相應的文件夾中。

7、刪除min/builder/index.php 文件或修改其文件名。防止他人通過“hoogle.flcub.cn/min”登錄,如需通過界面生成引入地址,則讓index.php恢復。

8、當需要調試js的時候,可以開啓debug模式,首先在配置文件config.php中啓用debug,再在引入地址中加入&debug=1,如下所示:

<script type="text/javascript" src="/min/b=skins/js_new&f=jquery-1.4.2.js,utils.js,fclub.js,jquery.scrollTo.js,fclub_index.js,smoothAnchor.js,overlay.min.js,toolbox.expose.min.js,centerDiv.js&debug=1"></script>

這樣即可像單獨引入一樣快速定位到某一js的某一行,進行調試。

 

Hoogle 2011-12-11

    新浪微博:http://www.weibo.com/yinuoba  歡迎關注。。。

  IT博客大賽投票邀請:https://blog.51cto.com/contest2011/1793311

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章