AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

前端增量发布 by 王雅琼@陆金所

发布者 weber
发布于 1433465168024  浏览 4553 关键词 前端, DevOps 
分享到

第1页

前端资源管理:

增量式与集中式

⺩王雅琼



第2页

Outlines



· 什么是增量式发布?



增量式



· 为什么要使用增量式? · 如何轻量实现增量式?



Incremental



Centralized

集中式



· 什么是集中式控制? · 为什么要使用集中式? · 如何实现集中式?



第3页

增量式

What? Why? How?



第4页

什么是增量式?

● 增量式:

• 静态资源的内容变化时,可以以某种增量的⽅方式体现这种变化。

● 增量式的⼀一般实现⽅方式:

• ⽂文件名添加随机版本号 • 资源⽂文件MD5校验 • 时间戳校验 • etc



第5页

LUFAX.COM使⽤用增量式的原因



• 运维灰度环境问题:

• 灰度环境:线上环境的镜像测试 环境。

• 不影响线上资源



• CDN部署问题:

• CDN:CONTENT DELIVERY NETWORK,即内容分发⺴⽹网络

• 静态资源缓存清除与替换:

• CDN使⽤用⽂文件名索引缓存资源 • 仅仅使⽤用原⽂文件名⽆无法做到版本更替



版本回滚



版本标识



第6页

⽆无CDN的效果



第7页

使⽤用CDN的效果



第8页

LUFAX.COM增量式特征



• 轻量 • ⽆无源码侵⼊入 • 动态压缩与替换 • 可维护性



• 源码体积较⼩小,引⼊入脚本简单 • ⽆无需在源码中引⼊入任何相匹配的代码 • 静态资源的动态合并和压缩,性能提升 • 可以适配LUFAX各种系统



第9页

轻量级增量式实现

• 基于node js和grunt开发

• 增量机制: ⽂文件命名加⼊入MD5和Branch NO.

• 压缩机制:

• 使⽤用concat,对应资源⽂文件压缩打包 • 正则匹配脚本抽取,智能提取js⽂文件引⽤用,动态压缩

• 替换机制:

• 内置增量:基于规则的引⽤用替换 • 外置正则配置⽂文件接⼝口



版本控制 传输效率 透明接⼝口



第10页

LU.COM增量式脚步



• Version X • 我们会持续优化……



• Version 3.0 • 公共⼯工具提取,对⼦子系统透明,纯⾃自

动化

• Version 2.0 • ⼦子系统静态资源md5, 各个系统独⾃自

⼀一套系统,做资源增量以及替换。

• Version 1.0 • 公共静态资源md5,以md5为基础资

源前⾯面会加上分⽀支后缀,⽅方便⼦子系统 ⼿手动替换使⽤用。



第11页

CONCAT机制



Node.js Grunt



CSSMIN UGLIFY



Concat.json



JCSSS



第12页

CONCAT机制

新资源版本

MD5匹配

历史版本



引⽤用替换



第13页

正则智能模式



Node.js Grunt



r.js replaceURl



JCSSS



custom.json



第14页

正则配置压缩

替换脚本



替换结果



第15页

集中式

What? Why? How?



第16页

什么是集中式?

● 集中式定义:公共资源的统⼀一集中管理

• 前端资源公共库 • 后端通⽤用模板 • 通⽤用的业务组件 • etc



第17页

为什么要采⽤用集中式控制?



• 从增量式存在的问题谈起:

• 公共资源升级和压缩会产⽣生新的 MD5资源名。

• 如果⼦子系统单独引⽤用,则需要逐⼀一 进⾏行资源路径的更新。

• 导致⼀一次升级,多次发版。



• 解决⽅方案:集中式控制机制

• 资源的统⼀一管理,统⼀一修改



效率低下



效率提升



第18页

如何实现公共资源集中式控制

● 来⾃自公共资源的需求:⼀一次升级,多处⾃自动升级



● 解决⽅方案:

• 引⼊入⽤用公共模板

• 资源打包更新MD5后直接 更新公共模板⽂文件

• ⼦子系统引⽤用公共模板后⾃自 动升级



● 优点:

• 增加部署效率

• 降低⼈人⼯工干预度,避免低 级错误

• 资源统⼀一管理



● 缺点:

• 升级透明之后,需引 ⼊入程序化的测试机制



第19页

如何实现公共资源集中式控制



• 来⾃自⼦子系统的需求 : 业务通⽤用组件升级和维护的需求



• 解决⽅方案:

• 抽取通⽤用业务组件 • 提供出通⽤用模板 • 系统引⽤用



• 优点:

• 业务组件只要⼀一份 • 升级维护简单



第20页

如何实现公共资源集中式控制

⼦子系统配置⽂文件

公共模板



配置到⼦子系统的效果



集中配置 脚本



第21页

⼦子系统模板应⽤用 – 使⽤用VELOCITY动态引⼊入模板

公共模板

使⽤用范例



第22页

⼦子系统模板应⽤用 – 静态HTML调⽤用

公共模板

Appache-SSI



使⽤用范例



第23页

讨论

•Q & A



wangyaqiong553@pingan.com.cn



支持文件格式:*.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。