Fis静态资源增量更新项目

静态资源增量更新

背景

根据Steve Souders的性能优化14条准则(什么!你还不知道赶紧恶补吧),攻城师们每次在代码发布上线前都会做一下几件事:

  1. js打包合并到一起、css打包到一起
  2. 合并后的资源利用压缩工具自动压缩
  3. 打包后的静态资源添加时间戳,高端一点的可能添加内容的MD5戳,开启服务器端永久缓存

资源合并减少了请求书、资源添加时间戳、MD5戳可以开启资源缓存,一切看起来都如此的美好。理想永远都是丰满的,现实确实骨感的。直到后来时间大家发现当我们需要频繁上线时一系列的问题就来了:

  1. 如果上线有新增加、删除文件我们每次都需要修改资源合并配置(假设你使用的是grunt、gulp等编译工具)
  2. 资源合并到一起是很好,但是在持续集成、快速迭代中细微修改都会使整个文件缓存失效,尤其是移动端浪费流量、页面加载速度慢用户体验就更差了

为了解决这些问题我们提出了两个新的解决方案:

静态资源自动合并方案、静态资源增量更新方案。下面主要给大家介绍静态资源增量更新方案, 插播广告静态资源自动合并方案是一个很NB的自动化方案,它解决了很多你现在遇到的,将来可能遇到的问题,这里附上传送门.

介绍

静态资源增量更新是一种新的静态资源缓存方案,它的核心**通过Ajax请求取代传统的Script和Link加载静态资源,并将静态资源存贮与localStorage中。 每次请求页面时先对比服务器最新资源和localStorage的文件(合并前的小文件)差异,通过Ajax更新修改的小文件,并更新localStorage内容,插入到页面。

增量更新方案的优点:

  • 减少不必要的请求,只在有更新时再发送请求
  • 增量更新资源,节省大量带宽,移动端优化效果更加明显

适用场景

增量更新方案可以应用于所有的前端项目中,但对于一下场景优化效果将会更加明显

  • 对于快速迭代、上线比较多的产品线
  • 对于慢网速环境,对于外国网络、移动端尤其适用

使用文档

  • 如果你没有使用过Fis参考这里
  • 如果你有Fisp的项目参考这里

设计

总体设计文档

详细设计文档

其他

和Manifest的结合

后续补充详细方案