【CDN】处理 cdn 缓存和 前端缓存

一、cdn 缓存问题

问题：
cdn 缓存问题是由于 cdn 节点缓存了页面文件，导致用户直接在 cdn 节点访问了对应文件，
而不是通过节点，这就导致用户可能使用旧版页面，发送旧的请求到服务器，从而引发错误。

解决：
① 使用灰度发布，先更新静态资源文件(js，css)，再更新页面文件(html,html中引用了静态资源文件)
② 前端使用了文件指纹方式，本质上是每次打包出的文件名以及html中引用的文件名变化，去访问cdn上不
存在的节点。由于新旧文件文件名不同，就不会有访问到旧文件的问题
③ 除了文件指纹方式，还可以通过引用中加入版本号的方式，如：
<script src='../a.js?v=1.0'></script>
通过修改 v 的方式，来避免访问到旧文件。这种方式的好处在于，只需要修改被修改的文件的版本号，
而不是去修改所有文件的版本号(不是所有文件都被更新了)。但也有维护困难，操作繁琐的问题

 

二、问题引申

一般打包项目中，用户都有一个前端的访问路口，如vue 的 index.html
问题：
由于index.html 这个文件名不可能修改，还是存在用户访问到旧的 index.html，结果访问到旧资源文件的问题

解决：
本质上还是 cdn 上缓存了旧的 index.html，可以清理cdn，或是让cdn主动知晓文件变化(对cdn 提供商有要求，部分提供商不支持)

 

三、前端重定向

情况：由于问题引申中的问题存在，若用户的浏览器中还是有旧的 index.html 呢？
由于前端的页面结构为：

解决： 可以在 head 的script 中判断当前用户访问的页面是否正确，如 多端中pc端访问到了移动端，移动端访问了pc端，可以通过http中的UserAgent判断，从而重定向。 或是向服务器发起请求，判断是否是最新的，若不是则由服务器重定向到最新的页面