前端开发日常 - 6七牛CDN上的网页缓存问题及HTML禁止缓存（续）

Posted 2021-04-08 前端开发日常moyufed

需求背景

紧接着之前的内容【前端开发日常 - 5】七牛CDN上的网页缓存问题及html禁止缓存。

由于七牛CDN无法通过设置对单独的文件修改，而只能通过对 bucket 的统一设置修改 max-age 响应头，我准备单独新建一个 bucket ，将不需要的缓存的页面发布在这个 bucket 中，从而达到整个前端打包页面发布新版、接收更新的目的。

解决方案

1、首先新建一个 bucket 专门存放入口页面（由于有的浏览器真的会把HTML文件缓存很久，哪怕加了时间戳访问）；

2、设置meta标签去除HTML缓存；

3、将静态资源发布到原有的 bucket，保证请求图片、js、css等文件都可以使用缓存；

4、由于跨域不能共享 localstorage，鉴权页面放在原有 bucket，保持与网页入口在同一个域名下。

具体访问流程如下：

【访问新 bucket 的 index.html（禁止缓存）】  - 【将参数传递到鉴权页面 path/{版本号}/auth.html （在原有bucket）】 - 【完成鉴权，设置localstorage】 - 【跳转至页面入口 path/{版本号}/index.html（在原有bucket）】

核心代码

去除新bucket的max-age

登录七牛进入管理控制台，进入【对象储存】 - 【空间管理】 找到新的 bucket ， 点击【设置】，找到【文件客户端缓存 maxAge】，将里面的值改小（因为不能设置为 0）。

修改CDN响应头的缓存设置

首先在七牛【CDN】 - 【域名管理】找到新bucket的域名，点击配置，再找到 【缓存配置】 - 【修改配置】，在里面配置不需要缓存的文件（.html）。修改之后，在此新bucket上传的html文件将不会再节点上缓存。

去除HTML缓存

我们可以采取通过meta标签去除缓存：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

其中，Cache-Control 对 HTTP 1.1 使用，Pragma 对 HTTP 1.0 使用，Expires 对 proxies 使用。

上传文件到七牛CDN

将入口（index.html）上传到新的 bucket，鉴权页面（auth.html）和项目编译的页面（index.html + 其它资源文件）通过发布到原有的bucket。通过上面的处理，我们的入口HTML文件将不会被缓存，并且以后每次上传改HTML入口文件，也不需要刷新预取。

发布完成之后，我们通过访问新bucket的入口，经过跳转auth.html鉴权，再跳转到真实的项目入口，由于真实项目每次发布新版都加了版本号前缀，我们可以访问到最新的页面。

解决用户收藏地址的问题

1、Webpack打包配置 publicPath 。

由于我们使用的是create-react-app，我们只需要在项目根目录增加一个.env.production文件，增加配置：

PUBLIC_URL="静态资源存储地址"

2、将auth.html与 打包出来的 index.html 文件发布到新的bucket，这样我们就只保留了静态资源在原有bucket，而在HTML中引入了这些资源。这样我们将使用新的bucket的域名来做localstorage共享，并且用户收藏的是新的域名。