关于移动端静态资源缓存的说明

---

title: 关于移动端静态资源缓存的说明 tags: categories: h5 date: 2017-05-25 18:18:55

目前移动端使用vue+webpack的架构

存在一个较为困惑的问题如果线上发布了之后，移动端不会自动刷新。

目前vue使用大量  Lazy Loading Routes   router.vuejs.org/en/advanced…

本质上是和require.ensure一样的问题

简述一下webpack打包的流程。

1. 将公共组件打包为common模块
2. 将entry打包为chunk
3. 将异步依赖js打包为chunk 同时将文件对应关系写入到manifest中
4. 将对应的入口html中引入对应common manifest 入口文件

因此通常一个画面加载完成之后公共依赖以及对应的模块关系在加载时已经明确。

比如点击某个按钮可以一步加载某个js文件（该关系在manifest文件中已经描述）

所以当采用非覆盖式发布的情况 被老版本依赖的异步js模块可能不存在了（缓存问题可以忽略，较为基础的工程化问题，下面链接也有所涉及）

参考gulp 上传到upyun的方案 动静分离之gulp上传CDN

Get到新知识点~

覆盖式发布与非覆盖式发布

可以参考

大公司里怎样开发和部署前端代码？

由于webpack天生的支持模块化，那么思路比较容易打开。

可以将所有的静态资源打包放入到cdn，采用非覆盖式发布代码，在打包发布的时候将所有生成的静态资源放到cdn中。

将webpack配置成cdn访问即可

参考

利用webpack处理开发与线上环境静态资源切换问题

对于旧版本web能够正常访问到旧版本的js在此可以解决。

但是有新的问题，如果存在用户一直使用旧版本的webapp可能也会存在问题。

考虑如下：

1. 服务器上存储当前最新webapp版本
2. 全局捕获js出错，如果出错则将版本和服务器版本校验，如果服务器版本较高则直接重新reload画面（由于移动端屏蔽了刷新画面，因此在捕获到错误的时候需要刷新画面以获取到更新之后的html）
3. 在前端画面也做定时校验 可以check当前是否是最新版本，如果不是将自动reload画面

较为需要注意的是不要随便设置html为不过期

Icon

如果上线了之后存在html设置了缓存很可能出现下次发布html无法get到最新

延伸阅读

静态资源同时可以放到localstorage中 减少网络请求（减少协商缓存）

静态资源（JS/CSS）存储在localStorage有什么缺点？