使用minify合并YUI请求
介绍
minify是一个基于php的开源项目,用它可以合并多个JS与CSS的请求。
下载与安装
下载链接:http://code.google.com/p/minify/
将下载下来的压缩包解压缩,将里面的min目录放到网站的根目录下。打开min目录修改里面的config.php文件,将$min_serveOptions['minApp']['maxFiles'] = 10;的值改大一些,这个参数表示一次请求最多可以合并多少个文件,因为YUI的细粒度很高,所以一次请求的模块文件很多,默认值10显然不够。同时将$min_cachePath = ‘/tmp’;这行的注释去掉,可以提升性能。
完成上面的步骤可以在浏览器测试一下,我机器的测试地址是http://localhost:8086/min/?f=/build/oop/oop.js,/build/event-custom/event-custom.js
注意服务器要开启mod_rewrite模块
改造YUI loader
因为YUI loader构造的请求地址是类似http://yui.yahooapis.com/combo?3.3.0/build/classnamemanager/classnamemanager-min.js&3.3.0/build/oop/oop-min.js&3.3.0/build/event-custom/event-custom-min.js&3.3.0/build/event/event-base-min.js&3.3.0/build/pluginhost/pluginhost-min.js&3.3.0/build/dom/dom-min.js&3.3.0/build/node/node-min.js&3.3.0/build/event/event-delegate-min.js&3.3.0/build/attribute/attribute-base-min.js&3.3.0/build/base/base-base-min.js&3.3.0/build/plugin/plugin-min.js&
这样的,URL没有参数名,每个JS文件用”&”号分隔。而minify的地址格式是http://localhost:8086/min/?f=/build/oop/oop.js,/build/event-custom/event-custom.js
,可以看出minify的请求地址用’f'当作参数名,每个JS地址用”,”号分隔。所以要对YUI loader进行一下改造,让它可以构造出符合minify格式的请求地址。
进入到YUI的build/loader文件夹,将loader.js备份一下,之后编辑loade.js,找到如下行:
1
2
3
4 |
url += frag; if (i < (len - 1)) { url += '&' ; } |
替换成下面的代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17 |
//fixed YUI 3.1.0 combo bug //http://yuilibrary.com/projects/yui3/ticket/2528680 if (url.slice(-3) === '.js' || url.slice(-4) === '.css' ){ //for K2 //使用Minfy 取代 Combo Handler //url += '&'; url += ',' ; } url += frag; // there is a bug that combo?a.css&b.css& /* if (i < (len - 1)) { url += '&'; } */ |
在YUI使用minify
做完上面的工作之后,就可以在YUI中使用自己的combine服务了。在实例化YUI的时候加上如下的配置项:
1
2
3
4
5
6
7 |
YUI({ combine: true , comboBase: '/min/?b=build&f=' , root: '' }).use( 'placeholder' , function (Y) { Y.all( '.test' ).plug(Y.Plugin.Placeholder); }); |
建议继续学习:
- JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述 (阅读:3072)
- CSS实现HTML元素透明的那些事 (阅读:2843)
- YUI 还是 jQuery? (阅读:2748)
- 动态加载JavaScript的小实践 (阅读:2252)
- 使用YUI 3开发Web应用的诀窍 (阅读:2076)
- The Deferred Evaluation of YUI 3 (阅读:2002)
- YUI3设计中的激进和妥协 (阅读:1655)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:小寒 来源: 记事本
- 标签: minify YUI
- 发布时间:2011-03-07 22:47:58
- [43] IOS安全–浅谈关于IOS加固的几种方法
- [43] 如何拿下简短的域名
- [42] 图书馆的世界纪录
- [42] Oracle MTS模式下 进程地址与会话信
- [41] 界面设计速成
- [40] android 开发入门
- [39] 【社会化设计】自我(self)部分――欢迎区
- [37] 读书笔记-壹百度:百度十年千倍的29条法则
- [36] 视觉调整-设计师 vs. 逻辑
- [34] 程序员技术练级攻略