YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Tools » 使用PHP Minify来做前端性能优化

使用PHP Minify来做前端性能优化

在看YAHOO前端工程师 Dav Glass 的博客时,看到了一篇介绍PHP Minify的文章(YUI Local Combo Handler)。于是我就自己动手试了试,效果确实还不错,而且使用起来也比较简单。在这里就来介绍一下Minify.

Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites.

It combines multiple CSS or JavaScript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

Minify项目自己的介绍:Minify遵循了Yahoo YSlow的前端性能规则,可以把多个CSS和JS文件合并打包,较少HTTP请求。同时还可以移除文件中不必要的空格和注释,还能使用GZip压缩文件体积,并设置客户端的缓存header信息,缓存文件。

手动配置使用URL路径

怎么样,不多错的功能吧?而且是开源免费,并且用起来的配置也十分的简单。只需要几部就可以搞定了:

第一步:下载Minify。解压之后,将文件夹中的min文件夹拷贝到你网站的根目录下。

第二步:配置config.php文件。只需要做如下调整就可以了:

// 设置缓存路径(根目录下的temp文件夹)
$min_cachePath = '/temp';
// 一次做多打包的文件数量
$min_serveOptions['minApp']['maxFiles'] = 30

第三步:使用Minify按顺序请求打包的文件。由于文件打包是通过Minify程序自动完成的,我们在写加载CSS和JS的路径的时候,就要使用Minify来请求这些文件,让它给你打包压缩,其实调用很简单,看看我的调用代码吧:

// 我这里只用JS的请求为例,CSS的规则是一样的,只是你应该用link标签,设置href的路径
// http://www.yaohaixiao.com/min/ - Minify程序的所在路径
// b=/js 制定请求的JS文件的文件夹路径
// f=jquery.js,share.js - 将http://www.yaohaixiao.com/js目录下的jquery.js,share.js文件打包,多个文件用“,”逗号分开
<script type="text/javascript" src="http://www.yaohaixiao.com/min/?b=/js&jquery.js,share.js"></script>

演示地址:PHP Minify 合并请求演示(请求的文件是将jq.tools.js和share.js合并后的内容)

怎么样?是不是很简单?当然,Minify还提供了其他一些方法来打包文件,我这里也介绍一下。

使用Minify Builder生成URL路径

要使用Minify Builder,你需要修改一下config.php文件,设置$min_enableBuilder = true;,这样你就可以使用Buider工具来生成请求文件的代码了。一旦你设置了$min_enableBuilder = true;,那么你就可以通过访问例如:http://www.yaohaixiao.com/mini/进入到Builder界面,添加你想打包的单个或多个文件了,如下图:

说明:一次添加的文件类型必须一样。

看到没有,在你点击了update按钮后,工具把生成的URL地址和完整的<script>标签都生成好了。当然,文件的数序你可以通过上下箭头按钮来调整。细心的你一定已经发现了,在我给的截图中Builder还给你生成Group配置的代码:

return array(
    // ... your existing groups here ...
    'keyName' => array('//js/share.js', '//js/jquery.tools.min.js'),
);

通过groupsConfig.php配置打包文件

上面面生成的代码,你只需要添加到min目录下的groupsConfig.php文件中就行了,当然keyName更换成你需要的名字。然后调用的代码如下:

// 我这里只用JS的请求为例,CSS的规则是一样的,只是你应该用link标签,设置href的路径
// http://www.yaohaixiao.com/min/ - Minify程序的所在路径
// g=keyName - keyName:配置的名称
<script type="text/javascript" src="http://www.yaohaixiao.com/min/?g=keyName"></script>

3种方式都十分的方便,就看你自己喜欢了。不要愣着了,赶快试试Minify,来优化你网站的前端性能吧。如果有朋友还想了解怎么结合Minify和YUI Loader来实现打包请求YUI库,就看看我前面提到的Dav的YUI Local Combo Handler

相关资源:

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:使用PHP Minify来做前端性能优化

« »

3 条评论

  • 是个好工具,怎么用倒是不太会。这个工具网上介绍的不多。

  • 估计雅虎这样的大门户用得上

  • Minify确实是很不错的工具,我这里把最基础的应用介绍了一下,稍后会把我学到更高级的使用方法也更新出来的

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)