基于yui combo的代码自动压缩及合并
TRANSCRIPT
基于YUI3和combo的代码压缩及合并拔赤
http://www.uedagazine.com2010-05-29
•
可维护性和性能之间的平衡•
YUI combo
•
模块树•
开发环境中的combo+minify
•
实例
• 可维护性和性能之间的平衡•
YUI combo
•
模块树•
开发环境中的combo+minify
•
实例
可维护性，我们应当这样：
1，OO（代码易读）2，从应用抽象出组件（组件重用）3，功能的颗粒化（多人协作）4，图片的零存（更改简单）5，脚本无压缩（方便调试）
性能，我们应当这样：
1，面向DOM（保证DOM操作效率）2、3，更少的脚本文件（减少http请求数）4，图片合并（减少http请求数）5，压缩脚本（js、css瘦身）
我们的取舍？
可维护性 vs 性能
•
可维护性和性能之间的平衡
• YUI combo•
模块树
•
开发环境中的combo+minify•
实例
Why YUI & combo?
•
Why YUI–
延时加载脚本（更饱和的利用缓存）
–
模块化（更适于团队开发）
•
Why combo–
减少http请求数
combo handler
<script src="http://cn.yimg.com/i/yui/3.0.0/build/yui/yui‐min.js"></script><script src=http://cn.yimg.com/i/yui/3.0.0/build/oop/oop‐min.js></script><script src="http://cn.yimg.com/i/yui/3.0.0/build/dom/dom‐min.js"></script>
<script src="http://cn.yimg.com/combo?i/yui/3.0.0/build/yui/yui‐
min.js&i/yui/3.0.0/build/oop/oop‐min.js&i/yui/3.0.0/build/dom/dom‐
min.js"></script>
•
可维护性和性能之间的平衡•
YUI combo
• 模块树•
开发环境中的combo+minify
•
实例
YUI模块树
Y.addmojo({slide:{
path:'js/slide.js',requires:['tab','widget','plugin']
},tab:{
path:'js/tab.js',requires:['node']
},my_app:{
path:'my_app.js',requires:['slide']
}});
模块树示意
YUI模块树 续
•
脚本排序–
..,node,tab,widget,plugin,slide,my_app
•
脚本合并–
http://your_cdn/combo?node.js&tab.js&wi
dget.js&plugin.js&slide.js&my_app.js
YUI combo的缺憾
1，没有自动压缩，上线之前要手动压缩脚本2，自定义的modules不会被combo
对YUI3-loader的hack
•
让YUI可以combo所有的脚本–
loader.js
1930行
•
可维护性和性能之间的平衡•
YUI combo
•
模块树
• 开发环境中的combo+minify•
实例
开发环境中的combo
•
Combo的模拟
http://a.tbcdn.cn/combo.php?yui/3.0.0/build/oop/oop.js &tbra/2.1/header/header.js
oop.js
开发环境a.tbcdn.cn
oop.jsheader.js
…
线上a.tbcdn.cn
header.js
客户端 oop.js header.js
oop.js header.js
开发环境中的minify
•
Jsmin–
http://github.com/rgrove/jsmin-php/
•
Cssmin–
http://code.google.com/p/cssmin/
开发环境中的combo+minify
•
Combo
•
Minify
http://a.tbcdn.cn/combo.php?yui/3.0.0/build/oop/oop.js &tbra/2.1/header/header.js
http://a.tbcdn.cn/minify.php?yui/3.0.0/build/oop/oop.j s&tbra/2.1/header/header.js
•
可维护性和性能之间的平衡•
YUI combo
•
模块树•
开发环境中的combo+minify
• 实例
淘宝彩票 – 时时彩•
http://a.tbcdn.cn/app/dp/lot/ssc/demo/ssc_none.html–
Ctrl+F5
Without combo
淘宝彩票 – 时时彩 续•
http://a.tbcdn.cn/app/dp/lot/ssc/demo/ssc.html–
Ctrl+F5
With combo
淘宝彩票 – 时时彩 续
•
combo+minify–
http://a.tbcdn.cn/app/dp/lot/ssc/demo/ssc.html
combo & minify
淘宝无combo
•
保存开发环境的combo mini文件•
另存到cdn中
•
打开COMBO_SCRIPT配置
•
你还在手动压缩脚本吗？•
你还在手动合并脚本吗？
•
那么你早就out了
Q & A