前端资源管理：

增量式与集中式

⺩王雅琼

Outlines



· 什么是增量式发布？



增量式



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



Incremental



Centralized

集中式



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

增量式

What? Why? How?

什么是增量式？

● 增量式：

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

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

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

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



• 运维灰度环境问题：

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

• 不影响线上资源



• CDN部署问题：

• CDN：CONTENT DELIVERY NETWORK，即内容分发⺴⽹网络

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

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



版本回滚



版本标识

⽆无CDN的效果

使⽤用CDN的效果

LUFAX.COM增量式特征



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



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

轻量级增量式实现

• 基于node js和grunt开发

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

• 压缩机制：

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

• 替换机制：

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



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

LU.COM增量式脚步



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



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

动化

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

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

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

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

CONCAT机制



Node.js Grunt



CSSMIN UGLIFY



Concat.json



JCSSS

CONCAT机制

新资源版本

MD5匹配

历史版本



引⽤用替换

正则智能模式



Node.js Grunt



r.js replaceURl



JCSSS



custom.json

正则配置压缩

替换脚本



替换结果

集中式

What? Why? How?

什么是集中式？

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

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

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



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

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

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

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



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

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



效率低下



效率提升

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

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



● 解决⽅方案：

• 引⼊入⽤用公共模板

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

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



● 优点：

• 增加部署效率

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

• 资源统⼀一管理



● 缺点：

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

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



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



• 解决⽅方案：

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



• 优点：

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

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

⼦子系统配置⽂文件

公共模板



配置到⼦子系统的效果



集中配置 脚本

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

公共模板

使⽤用范例

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

公共模板

Appache-SSI



使⽤用范例

讨论

•Q & A



wangyaqiong553@pingan.com.cn