当前位置:首页 » 网页前端 » webspa
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

webspa

发布时间: 2023-08-11 18:07:01

前端SPA应用缓存问题解决与实践

要解决问题,有先决的理论知识先要了解

分两种:

这种机制下,浏览器会先找本地缓存,命中则不会从服务器请求,并返回200状态码,且附有 disk cache 或者 memory cache 字样

这种机制,强缓存失效后,浏览器物培会携带缓存标识向服务器发起请求,服务器根据标识决定是否使用缓存

首先一点,就是 “浏览器会携带缓存标识” ,这个标识是什么,有两种

好,原理讲了,现在凡是用到nginx的罩宽唯,基本上自动都会实现了ETag和Last-Modified,也就是说,这部分实现机制,已经是默认的!不需要你另加处理。

好,问题来了,如何处理前端SPA应用的缓存问题呢?

现在的SPA要么Vue要么React要么Angular

默认情况下,我们会看到:

即所有资源第一次进,强缓存,第二次进,无意外情况下,会执行协商缓存。

之所以会出现SPA缓存问题,在于index.html是304,那么客户端读取到的,有可能是本地的Not Modified,那么继续下去,读的依旧是本地的disk cache

如何解决问题呢?

这里有个特性,SPA通过webpack打包,一般默认会带有contenthash值,即当对应文件有改动,这个contenthash值才会改变,进而改变打包出来巧贺的文件名,意味着 只有改变了的文件,文件名才会变,没有改变的文件是不会变的

如果需要对特殊的文件特殊处理,比如文字类型的文件设置更大的缓存时间或者别的,可以参考上述语法单独加映射

修改后, service nginx reload 一下,浏览器可以看到差别:

index.html一直是200,且从服务器直接读取,而所有其他的静态文件,均从memory or disk cache读取

好,那么接下来如果有更新,可以想象,变化的文件有

而由于index.html一直是请求服务器的,那么得到的入口js也必然是最新的,意味着如果没改动的,走本地强缓存,有改动的,会请求最新的,之后请求会走本地强缓存。

Problem solved.

解决前端SPA缓存问题: