前端热更新初步了解

前端页面热更新

了解过前端性能优化的同学应该清楚，给页面加载提速的终极方案就是CDN，这是BS架构本身的特点决定的，无论什么前端提速手段，最终都会回到客户端文件的传输上来；与之相对的CS架构则不存在加载压力，但CS架构的问题是更新不灵活，那么有没有一种方法能结合这两种架构的优点，在加载速度和更新灵活性之间找到一个平衡点呢？这就是本文要探讨的一种方案：前端热更新。

方案概述

“前端”和“热更新”这两个词通常很少一起出现，提到热更新一般都是指APP的一种静默更新方式，这种方式会在用户使用时悄悄检测并下载增量更新包，当用户下次打开APP时自动应用更新，从而将APP“更新”这个破坏连贯性的动作隐藏于无形；前端页面的加载则相当于每次都是“全量更新”，如果能让前端页面也能用上“本地模板”，那将极大缩短前端加载时间，而且以此为前提，我们也可以实现一个前端的模板热更新机制，做到不影响页面更新的实时性。

应用场景

场景一：APP内嵌页面。

比如电商类APP的首页，经常需要改版或者做活动皮肤，如何减少更新成本就成了一个大问题。使用了热更新方案我们就可以用HTML实现APP首页，页面内容以模板的形式存进localStorage，后台静默更新模板，下次启动自动生效；针对具有一定时效性的活动皮肤，我们以补丁的形式发布，补丁文件叠加在模板上产生最终的活动模板效果，对于补丁包我们可以提前加载并预存在本地，补丁包应该包含自身的生效时段信息，前端检测到时间处于活动周期内时应用补丁。最终可以做到热更新页面无论改版还是做活动，只需要前端发版就可以&#