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

 

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