minify:服务端合并和压缩JavaScript和CSS文件

Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并 JavaScript和CSS文件、CSS Sprites、图像映射(Image Map)和使用Data URI来编码图片。CSS Sprites 和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用。目前大部分网页中的 JavaScript和CSS文件数量和开发时一致,少量的网页会根据实际情况采取本地合并,这些合并中相当多的是有选择地手动完成,每次新的合并都需要 重新在本地完成并上传到服务器,比较的随意和繁琐,同样文件的压缩也有类似的情况。而利用服务端的合并和压缩,我们就可以按照开发的逻辑尽可能让文件的颗 粒度变小,利用网页中URL的规则来自动实现文件的合并和压缩,这会相当的灵活和高效。

Minify

      在 Google Code上有一个PHP的开源项目叫Minify,它可以合并、精简、Gzip压缩和缓存JavaScript和CSS文件。其文件合并功 能就非常类似Combo Handler,只不过URL的语法稍微有点不同。如果Yahoo! CDN安装了Minify,那么上面 Rich Text Editor的代码用Minify的默认格式来写就是:


<script src="http://yui.yahooapis.com/min/f=
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js,
2.8.0r4/build/container/container_core-min.js,
2.8.0r4/build/menu/menu-min.js,
2.8.0r4/build/element/element-min.js,
2.8.0r4/build/button/button-min.js,
2.8.0r4/build/editor/editor-min.js"></script>

本地使用Minify很简单,只需要Apache + PHP环境就OK了:

  1. 安装好Apache + PHP (Windows、Mac)。

  2. 下载Minify源码,解压,然后把min文件夹复制到指定的根目录下,比如localhost。这时URL的写法大概是http://localhost/min/f=...

  3. 启用Apache的Mod Rewrite模块,然后在min文件夹下新建.htaccess文件,并添加如下Rewrite规则:

<IfModule mod_rewrite.c>
RewriteEngine on
# You may need RewriteBase on some servers
# 如果做了所有的开启Mod Rewrite的设置依旧无效,请城市尝试启用下面这句
#RewriteBase /min
# rewrite URLs like "/min/f=..." to "/min/?f=..."
RewriteRule ^([bfg]=.*)  index.php?$1 [L,NE]
</IfModule>
    4、配置Minify,即编辑min/config.php文件:


   

$min_enableBuilder = true;
//本地使用时可以通过http://dwn/min/builder/来进行配置,外部使用时请设置为false
   
//$min_cachePath = 'c:WINDOWSTemp';
//$min_cachePath = '/tmp';
//$min_cachePath = preg_replace('/^d+;/', '', session_save_path());
//选择其一,去掉注释设置临时缓存目录,这样可以减少程序运算提高性能
   
$min_serveOptions['maxAge'] = 1800;
//设置浏览器缓存的时间,为了提升性能建议这个时间设置尽可能的长,比如315360000
//如果需要在不改变URL的情况下更新静态文件,可以采用类似时间戳的方式,
//如http://localhost/min/f=example/example.css&20100601.css
//建议静态文件采用版本号管理,每次修改都需要升级版本号,这样就无需时间戳了,
//如http://localhost/min/f=example/example_1_0_1.css
   
$min_serveOptions['minApp']['maxFiles'] = 10;
//参数f获取参数的个数,即合并的文件个数,这个数量完全可以增大,比如50,
//当然可能会遇到URL最大值问题,后会有解释
   
$min_documentRoot = '';
//$min_documentRoot = substr(__FILE__, 0, strlen(__FILE__) - 15);
//$min_documentRoot = $_SERVER['SUBDOMAIN_DOCUMENT_ROOT'];
//当$min_documentRoot为空时,其值就是$_SERVER['DOCUMENT_ROOT'],
//但合并的文件不在$_SERVER['DOCUMENT_ROOT']下,会导致400错误,
//这个时候可以启用第2行或第3行
  1. 使用Minify:比如,有两个 JavaScript文件,http://localhost/example/a.js,http://localhost/example /b.js,那么使用Minify合并的URL是http://localhost/min/f=/example/a.js,/example /b.js,直接把这个URL放到页面中就可以使用了。 

     实际上Minify不仅仅实现了合并功能,同时默认在合并的同时还会对文件进行精简压缩,如果你在本地本身就对文件进行压缩了,比如使用YUI Compressor,那么可以在config.php中进行如下设置取消Minify的压缩以提升性能:


    

$min_serveOptions['minifiers']['application/x-javascript'] = '';
$min_serveOptions['minifiers']['text/css'] = '';


minify-2.1.7.zip

关键词: 压缩javascript和css , minify

上一篇: 给目前在互联网公司上班朋友的建议
下一篇: 监控discuz防水墙云平台返回的内容的代码

目前还没有人评论,您发表点看法?
发表评论

评论内容 (必填):