Your SlideShare is downloading. ×
  • Like
构建可扩展的静态资源管理系统
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

构建可扩展的静态资源管理系统

  • 2,204 views
Published

 

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,204
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
39
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 构建可扩展的静态资源管理系统
    许阳寅@淘宝
  • 2. 关于我
    许阳寅(文河@淘宝)
    f2e.us
    yyfrankyy@gmail.com
  • 3. 静态资源管理
    常见功能
    预编译其他资源(LESS/Sass,CoffeeScript)
    规范检查,语法检查,安全检查
    Sprite
    合并,压缩
    各自实现 VS 系统化处理
  • 4. 现有系统
    facebook的静态资源管理系统
    跟php深度集成,组件跟JS/CSS/Image绑定
    依赖分析,本地化,合并,sprite,压缩
    伸缩性,自我学习
    百度的前端编译平台
    统一化执行脚本
    规范检查,安全检查
    CSS3
    模板检查,HTML压缩
    自动时间戳
  • 5. 淘宝现有的RMS系统
    编译TMS模板
    语法检查(js)
    安全检查(php/image)
    编码转换
    压缩
  • 6. 为何需要更进一步
    需求
    产品线众多,构建规则不同
    每周发布量大
    处理文件的方式大不一样
    目标
    快速稳定
    可扩展
    可配置
  • 7. 快速稳定
    实现调度中心,集中控制容错,反馈日志
    异步工作流(NodeJS)
  • 8. 可扩展
    各种语言实现的预处理工具
    YC/GC: Java
    CSSGaga: .NET
    LESS/CoffeeScript: NodeJS
    使用NodeJS和其他平台进行异步通信
    NodeJS社区丰富的模块资源
  • 9. 可配置
    {“type”: “JavaScript”
    ,“steps”: [
    [“coffeescript”, {}]
    ,[“nativeascii”, {}]
    ,[“compressor”, {“type”: “UglifyJS”}]]}
    {“type”: “CSS”
    ,“steps”: [
    [“less”, {}]
    ,[“compressor”, {“type”: “YC”}]]}
  • 10. 和应用集成(自动时间戳)
    后端:发布时同步生成时间戳文件
    前端:importAssets(“apps/tms/js/spm.js”)
    • <script src=“http://<?phpcdn(); ?>/apps/tms/js/spm.js?t=<?php require_once(‘timestamp/apps/tms/js/spm.js.php’); ?>”></script>
    • 11. <script src=“http://a.tbcdn.cn/apps/tms/js/spm.js?t=1”></script>
    • 12. <script src=“http://assets.daily.taobao.net/apps/tms/js/spm.js?t=$random”></script>
  • 下一步
    处理粒度
    单个文件
    整个应用打包
    自动构建文件(wscript, package.json)
    和性能中心对接
  • 13. 几点特性
    拦截应用Assets入口
    配置预处理过程
    利用NodeJS的模块资源和异步特性进行流水线组装
  • 14. 谢谢
    Q&A