用Minify合并css和Javascript文件以减少HTTP请求

在web前端的优化中,一个网站的打开速度仍然是衡量网站质量的重要指标之一,而网页本身的HTML文件一般都是比较小的,所以影响网页的加载速度的最关键的一般都是资源的加载速度。一个网页中的请求太多,一般情况下会严重影响打开速度。为了提高网站速度和用户体验,我们不得不减少请求数量,一方面,一些先进的技术不断的应用到实际中,如利用css sprite技术合并网页背景图片来减少请求,另一方面随着网站体积和规模的不断扩大,我们不得不把一些东西分开,以便扩展和管理。

一个大型的网站,不论是css或者Javascript等其它文件,不可能只有一个,但是从提高前端的体验来说,我们希望请求越少越好。当矛盾出现的时候,一些新技术就应运而生,Minfy就是其中优秀的代表.

使用方法:1,下载Minify http://code.google.com/p/minify/downloads/list
2,解压其中的min文件夹到你网站的根目录
3,配置,找到min文件夹下的config.php,找到52和52行,如果你的系统是windows,那么删除52行的注释,如果是linux,删除53行的注释
4,配置伪静态,如果你的web服务器是apache,并且allowoverride是all,则可以忽略这一步(系统已经配置完成),如果其它web服务器,请配置其它规则(各个配置标准不一样,请自行百度)。

配置完成之后,即可通过工具对css文件进行合并和压缩。访问规则 htt://域名/min/f=xxx.css,f=后面就是自己需要填写的css或者js文件,用逗号隔开,如http://域名/min/f=1.css,2.css,就能返回两个文件的合并文件。当然,你也可以通过设置groupsConfig.php的方式来设置组显示。如css’ => array(‘//css/file1.css’, ‘//css/file2.css’),在引用的时候,只需要访问http://域名/min/g=css即可返回这两合并的文件。

其实这个原理是挺简单的,只是用PHP在接受请求,在服务器端把数据合并之后以相应的MIME类型返回就可以,中间涉及到客户端和服务器端缓存处理,压缩等等。

发表回复