前端发布的文件在浏览器和小程序缓存不会自动刷新

发布于 2022-09-13 00:39:11 字数 2652 浏览 28 评论 0

用vite打包的vue3项目，生成的index.html如下（部署在nginx）

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <title></title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="msapplication-TileColor" content="#00aba9">
  <meta name="theme-color" content="#ffffff">
  <!-- region disable cache -->
  <meta content="private,no-cache,no-store,must-revalidate" name="Cache-Control">
  <meta content="Thu Jan 01 1970 08:00:00 GMT" name="Expires">
  <meta content="no-cache" name="Pragma">
  <!-- endregion -->
  <link rel="icon" href="favicon.svg?v=2021-04-02T03:15:11.333Z" type="image/svg+xml">
  <link rel="apple-touch-icon" href="pwa-192x192.png?v=2021-04-02T03:15:11.339Z">
  <link rel="mask-icon" href="safari-pinned-tab.svg?v=2021-04-02T03:15:11.342Z" color="#00aba9">
  <script data-config="" src="js/config.js?v=2021-07-16T07:43:44.660Z"></script>
<script src="js/config.production.js?v=2021-06-26T08:47:25.770Z"></script><script type="module" crossorigin src="./assets/index.2ad23f44.js"></script>
  <link rel="modulepreload" href="./assets/vendor.e17f3b1e.js">
  <link rel="stylesheet" href="./assets/vendor.b0df0557.css">
  <link rel="stylesheet" href="./assets/index.1ae18a98.css">
<link rel="manifest" href="./manifest.webmanifest"><script src="./registerSW.js"></script></head>
<body>
<div id="app"></div>




<script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
  <script nomodule src="./assets/polyfills-legacy.5aaf34bd.js"></script>
  <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.4cc821f8.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
</body></html>

index.html本身设置了Cache-Control，Expires，no-cache来避免客户端缓存，试图让客户端每次访问都从服务端取最新的版本
内部引用的静态资源则用打包工具加了?v=...形式的时间戳
代码生成的js和css包则自动加了hash后缀，如果打包时内容发生了变化，hash也会变化

在浏览器访问时，如果先打开浏览器，访问过老版本网页，然后关闭浏览器，打包更新，再重新打开浏览器，则仍然显示老版本网页（F12 network中显示html js css都是from disk cache），此时手动F5刷新，才变成新版本网页

在微信小程序webview访问时，如果曾经访问过老版本网页，然后关闭微信小程序，打包更新，再重新访问，则仍然显示老版本网页，手动反复退出重进多次才会刷新为新版本网页

分享到QQ

分享到微博