静态资源缓存策略

一、需求说明
现场项目的版本升级、解决问题经常涉及到js、css等静态资源的修改,这类文件变更后,由于浏览器的缓存机制,经常发生前端静态资源不能及时刷新,需用户手动清除浏览器缓存才能解决问题,导致产品用户体验差,用户满意度降低。资源版本管理针对这个现状,解决静态资源实时刷新的问题。

二、功能说明
1.版本变更管理。
2.静态资源刷新。

三、设计思路
将静态资源请求的url增加版本号来刷新资源,同时在版本号不变的情况下充分利用浏览器缓存机制,不影响性能。
1.前端静态资源请求增加版本号
所有资源文件请求在平台框架层面动态增加版本号信息。
用户对JS的引用使用平台提供的自定义标签<i-script>。
用户对css的使用通常不需要自行加载,自定义css可以在业务程序CSS文件中添加。

<script type="text/javascript" src="/Liems/core/*.js?ver=1.0"></script>;
<link rel="stylesheet" type="text/css" href="core/iview/styles/view.css?ver=1.0">;

2.后台实现方案
方案1:定时扫描源文件变化 
后台插件监控源文件变化,将文件变更版本信息保存到数据库。其中,文件的变更包括js和css文件修改、css文件创建等。版本信息如下所示:
文件名称                   变更类型                  变更时间                                      版本号
/app/cm/base/*.js         修改                         2019-06-13 11:26:26                  1.1
/app/cm/base/*.css      创建                         2019-06-12 18:26:26                  1.0
方案2:版本升级工具 
现场运维人员使用平台提供的标准工具或web部署平台进行版本升级变更,工具自动完成升级相关工作如停服务、备份文件、拷贝文件、执行db脚本、修改配置文件、启服务等,这些工作完成之后工具会根据更新包中的文件信息刷新数据库中的版本信息,这个过程即标准化运维。此方案涉及两大方面:
开发自动部署工具。
规范运维工作。
版本更新包标准格式,运维人员升级操作只要一键执行deploy.bat即可。

3.两种方案对比:
对比维度 /方案                                                        文件扫描方式                                                             版本升级工具
1.部署方式                      使用插件方式,需额外维护插件                                                   平台自带功能,无需额外维护
2.运行原理                      版本信息由插件扫描获取,属被动式获取                                     版本信息在升级变更时一次性完成,属主动式管理
3.程序性能                      定时任务扫描源文件目录,资源有浪费                                        版本升级时才刷新后台,不占用资源
4.可靠性                          插件服务中断的情况会影响版本刷新版本                                    刷新取决于版本升级操作
5.用户体验                      会有一定延迟                                                                                用户无感知
6.运维方式                      会增加插件运维工作                                                                     不会增加运维工作
7.研发工作量                   研发简单, 工作量较少                                                                  有一定工作量
8.版本号规则                  后台自动累加某个文件的版本号版本号                                        由平台统一管理
9.工作模式                      未改变传统手工升级模式                                                             属标准化运维,需完善运维规范和工具

四、程序处理
1.版本管理
方案一, 定时扫描源文件方式
说明:插件采用独立部署的方式,应用服务的中断不会影响插件的运行,但插件本身可能会有异常中断的场景,如操作系统重启、插件被人为停止等。
方案二,版本升级工具
工具提供web界面和客户端两种操作方式,根据生产环境的部署情况而定。工具包括以下功能:
    启停服务
    备份文件
    拷贝文件(项目配置文件不建议直接覆盖,推荐使用平台工具的文件修改功能)
    执行sql脚本
    执行shell脚本
    修改项目配置文件
    保存版本变更信息

五、项目前期实施方案
考虑到方案二的开发需要一定时间, 在新项目前期可以直接给所有静态资源请求增加时间戳的方式进行过渡,待项目稳定之后再切换到方案二。具体方案如下:
1.框架公共JS和CSS、业务程序JS和CSS文件统一在liems.ui.js中处理。
2.VUE组件中使用到的图片、字体文件要求按规范使用C层组件(如c-img和c-icon标签)加载,由组件统一添加时间戳。
3.Html文件的入口都在VUE组件中,也由组件统一处理。
4.其他非标准页面中加载的静态资源自行处理。
5.CSS文件中引用图片的情况(很少), 平台无法统一处理。建议处理方式为:修改图片名称同时修改CSS文件。
6.提供全局开关配置,待项目稳定后,切换到方案二模式。

Guess you like

Origin blog.csdn.net/weixin_38316944/article/details/114528593