前端开发 combo yui 压缩 合并

1. 基于YUI3和combo的代码压缩及合并
拔赤 bachi@taobao.com
http://www.uedagazine.com
2010-05-29

2. 关于我
• 李晶，花名拔赤
– 淘宝前端工程师
– Blog: http://www.uedmagazine.com
– Msn: lijing00333@163.com

3. • 可维护性和性能之间的平衡
• YUI combo
• 模块树
• 开发环境中的combo+minify
• 实例

4. • 可维护性和性能之间的平衡
• YUI combo
• 模块树
• 开发环境中的combo+minify
• 实例

5. 可维护性，我们应当这样：
1，OO（代码易读）
2，从应用抽象出组件（组件重用）
3，功能的颗粒化（多人协作）
4，图片的零存（更改简单）
5，脚本无压缩（方便调试）

6. 性能，我们应当这样：
1，面向DOM（保证DOM操作效率）
2、3，更少的脚本文件（减少http请求数）
4，图片合并（减少http请求数）
5，压缩脚本（js、css瘦身）

7. 我们的取舍？
可维护性 vs 性能

8. • 可维护性和性能之间的平衡
• YUI combo
• 模块树
• 开发环境中的combo+minify
• 实例

9. Why YUI & combo?
• Why YUI
– 延时加载脚本（更饱和的利用缓存）
– 模块化（更适于团队开发）
• Why combo
– 减少http请求数

10. 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>

11. • 可维护性和性能之间的平衡
• YUI combo
• 模块树
• 开发环境中的combo+minify
• 实例

12. 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']
}
});

13. 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

14. YUI combo的缺憾
1，没有自动压缩，上线之前要手动压缩脚本
2，自定义的modules不会被combo

15. 对YUI3-loader的hack
• 让YUI可以combo所有的脚本
– loader.js 1930行

16. • 可维护性和性能之间的平衡
• YUI combo
• 模块树
• 开发环境中的combo+minify
• 实例

17. 开发环境中的combo
• Combo的模拟
开发环境a.tbcdn.cn 线上a.tbcdn.cn
客户端 oop.js
header.js
oop.js
oop.js header.js
…
oop.js header.js
header.js
http://a.tbcdn.cn/combo.php?yui/3.0.0/build/oop/oop.js
&tbra/2.1/header/header.js

18. 开发环境中的minify
• Jsmin
– http://github.com/rgrove/jsmin-php/
• Cssmin
– http://code.google.com/p/cssmin/

19. 开发环境中的combo+minify
• Combo
http://a.tbcdn.cn/combo.php?yui/3.0.0/build/oop/oop.js
&tbra/2.1/header/header.js
• Minify
http://a.tbcdn.cn/minify.php?yui/3.0.0/build/oop/oop.j
s&tbra/2.1/header/header.js

20. 相关资源 - minify
• Combo+minify
– http://code.google.com/p/minify/

21. • 可维护性和性能之间的平衡
• YUI combo
• 模块树
• 开发环境中的combo+minify
• 实例

22. 淘宝彩票 – 时时彩
• http://a.tbcdn.cn/app/dp/lot/ssc/demo/ssc_none.html
– Ctrl+F5
Without combo

23. 淘宝彩票 – 时时彩 续
• http://a.tbcdn.cn/app/dp/lot/ssc/demo/ssc.html
– Ctrl+F5
With combo

24. 淘宝彩票 – 时时彩 续
• combo+minify
– http://a.tbcdn.cn/app/dp/lot/ssc/demo/ssc.html
combo & minify

25. 淘宝无combo
• 保存开发环境的combo mini文件
• 另存到cdn中
• 打开COMBO_SCRIPT配置

26. • 你还在手动压缩脚本吗？
• 你还在手动合并脚本吗？
• 那么你早就out了

27. Q&A