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

前言

前端SPA应用缓存问题
原先的客户端已经加载过资源了（进过一次页面），然后更新静态资源，客户端重新进入页面，还是访问的之前未更新的资源，需要客户端手动刷新才能获取最新的资源（或者过段时间本机缓存失效后，重新进）

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

浏览器缓存类型

分两种：

• 强缓存
• 协商缓存

强缓存

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

image.png

Memory cache： 很好理解，内存中的缓存，较小，快，拥有内存存储的特点，不赘述

Disk cache: 也很好理解，磁盘中的缓存，较大，比内存慢，拥有磁盘存储的特点，不赘述

协商缓存

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

• 协商缓存生效，返回304和Not Modified
• 协商缓存失效，返回200和请求结果

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

• Last-Modified
• ETag

Last-Modified 和 If-Modified-Since

很好理解，上一次修改的时间。
浏览器在第一次访问资源时，服务器返回资源的同时，在 response header 中添加 Last-Modified 的 header，值是这个资源在服务器上的最后修改时间，浏览器接收后缓存文件和header
浏览器下一次请求这个资源，浏览器检测到有 Last-Modified 这个 header，于是添加 If-Modified-Since 这个 header，值就是 Last-Modified 中的值。服务器再次收到这个资源请求，会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比，如果没有变化，返回 304 和空的响应体，浏览器直接从缓存读取
如果 If-Modified-Since 的时间小于服务器中这个资源的最后修改时间，说明文件有更新，则返回新的资源文件和 200

ETag 和 If-None-Match

Etag 是服务器响应请求时返回当前资源文件的一个唯一标识（由服务器生成），只要资源有变化，Etag 就会重新生成
浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的 Etag 值放到 request header 里的 If-None-Match 里，服务器只需要比较客户端传来的 If-None-Match 跟自己服务器上该资源的 ETag 是否一致，就能很好地判断资源相对客户端而言是否被修改过了
如果服务器发现 ETag 匹配不上，那么直接以常规 GET 200 回包形式将新的资源（当然也包括了新的 ETag）发给客户端
如果 ETag 是一致的，则返回 304 指示客户端直接使用本地缓存即可

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

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

前端SPA应用缓存策略

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

默认情况下，我们会看到：

image.png

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

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

如何解决问题呢？

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

• 对首页index.html 取消强缓存。在nginx配置上 no cache

location / {
        root   /home/app_front/online_clinc;
        ...
        add_header Cache-Control "no-cache, no-store";
    }

• 对除首页外的文件，设置强缓存且过期时间设置大点，比如180d

location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ {
        root /home/app_front/online_clinc;
        expires 180d;
        add_header Cache-Control "public";
    }

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

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

image.png
image.png

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

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

• index.html - 因为引入的入口js一定会变名字
• 对应的入口js文件以及涉及到改动的js

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

大部分都走了本地强缓存，少部分有更改的，会请求最新，之后请求会走本地强缓存

Problem solved.

总结

解决前端SPA缓存问题：

• 对首页index.html 取消强缓存。在nginx配置上 no cache
• 对除首页外的文件，设置强缓存且过期时间设置大点，比如180d