5分钟实现网站资源版本检测与更新!

1. 浏览器的缓存机制

首先了解一下关于浏览器缓存网站资源的基本机制

1.1 缓存类型分类

强制缓存: 浏览器在发起请求前检查本地缓存中是否有满足条件的资源。如果有，则直接使用缓存资源，不再向服务器发起请求。主要依赖 HTTP 响应头中的 Expires 和 Cache-Control 字段。
协商缓存: 当强制缓存失效后，浏览器会携带缓存标识（如 Last-Modified 或 ETag）向服务器发起请求，由服务器根据缓存标识判断是否使用缓存。主要依赖 HTTP 请求头中的 If-Modified-Since 和 If-None-Match 字段，以及响应头中的 Last-Modified 和 ETag 字段。

1.2 缓存读取规则

浏览器会根据 HTTP 响应头中的 Cache-Control 和 Expires 字段来判断资源是否需要缓存以及缓存的有效期。Cache-Control 的优先级高于 Expires。如果 Cache-Control 指示不需要缓存，则不会进行缓存；如果指示需要缓存，则会根据 max-age 等参数确定缓存的有效期。

1.3 浏览器的一些行为

浏览器在第一次请求资源后，会获取请求的结果及缓存标识。接下来，浏览器会根据第一次请求返回的响应头来确定缓存处理方式，分别是强制缓存和协商缓存。强制缓存直接使用本地缓存资源，而协商缓存则需要向服务器发送请求并由服务器判断是否使用缓存资源。

但是以上的缓存行为也导致了一些问题的产生，例如网站内容已经更新，但是用户访问依旧在使用缓存资源所产生用户行为差异问题，虽然可以通过服务器禁用缓存以及前端设置 meta 标签禁用缓存，但实际效果并不理想。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <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" />
    <title>禁用缓存的页面</title>
  </head>
  <body>
    <h1>这个页面禁用了缓存。</h1>
  </body>
</html>

2. 资源版本检测

从以上问题出发，为了让每个用户在网站资源更新后都能收到更新提示以及强制刷新网站，可以通过服务器来记录一个资源版本标识，对比用户本地资源版本是否一致来判断是否有更新。

2.1 记录版本

新建一个 version.json 文件用于保存资源版本信息，放到项目 Utils/public 文件下都可以

{
  "version": "1.0.0"
}
// 也可以使用时间戳来记录,仅作对比记录

2.2 检测版本

将资源版本信息记录下来打包部署到网站上后，可以通过定时轮询或将版本信息携带到请求头中来检测版本更新，下面是一个简单请求示例:

// 新建一个 checkVersion.js 文件
import vs from "../../public/version.json"; // 引入上一步封装的版本记录文件
import http from "./http"; // 自己使用axios封装的请求类,使用自己的方式请求即可

// 封装检测函数,参数为一个回调函数,处理版本检测不一致的后续操作
export default async function checkVersion(callback = null) {
  let t = new Date().getTime();
  let url = `${mode}://${window.location.host}/version.json?t=${t}`; // 请求附带上时间戳

  let result = await http.get(url);

  if (result.version !== vs.version) {
    // 用户本地资源版本与服务器版本不一致时调用回调函数,提示用户有更新或刷新网页
    if (callback) callback();
  }
}

checkVersion(() => console.log("有新版本更新! 请刷新网页"));

2.3 防止刷新使用缓存

到了这一步，网站缓存的核心问题还是没有解决，那就是在版本检测到不一致时，触发网页刷新后可能用户还是会使用旧的缓存，所以在使用项目打包时，对输出的静态资源进行处理避免使用缓存，以下以 vue 项目为例，在 vue.config 中处理，webpack 打包设置方式类似:

const timeStamp = new Date().getTime();
module.exports = {
  // 生产环境构建文件的目录
  outputDir: "dist",

  // 打包输出 js 静态资源时，命名中拼接上时间戳，保证每次资源输出的唯一性
  configureWebpack: (config) => {
    config.output = {
      ...config.output,
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/[name].${timeStamp}.js`,
    };
  },
  // 去掉map文件
  productionSourceMap: false,
};

此时用户触发版本检测刷新网页过后就不会在使用缓存内容，只需要保证每次打包部署的资源版本不一致即可

3. 资源版本号自动更新

如果每次打包项目时都需要手动去修改 version 文件中的版本号有点过于繁琐，其实可以使用 node 来自动实现这一步

3.1 自动累加版本函数封装

新建一个 addVersion.js 文件，写入:

const fs = require("fs");

//返回version的json数据
function getVersionJson() {
  let data = fs.readFileSync("./public/version.json");
  return JSON.parse(data);
}

let versionData = getVersionJson();
let arr = versionData.version.split("."); //切割后的版本号数组

arr[2] = parseInt(arr[2]) + 1;
versionData.version = arr.join(".");

//用versionData覆盖version.json内容
fs.writeFile("./public/version.json", JSON.stringify(versionData, null, "\t"), () => {});

console.log("当前资源版本:" + versionData.version);

上述函数会将自动累加后的版本号写入到 version 文件当中，当然此处也可以使用时间戳来替代版本号来做记录对比

3.2 执行打包前调用版本更新函数

在执行打包命令前，先通过 node 自动执行一次累加函数再执行打包项目，这样每次打包项目时都能自动更新资源版本号，下面以 vue 项目举例，在 package.json 文件中修改:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "node ./src/utily/addVersion.js && vue-cli-service build",
    // addVersion 文件路径为你自己存放的相对路径
    "lint": "vue-cli-service lint",
  },

以上步骤完成后，每次网站更新后都可以触发版本检测给予用户一定的更新反馈处理，刷新网站后，不再会有缓存问题同时也能提升用户体验。

Seventeen