应用更新时刷新缓存不起作用 - Vue、webpack、路由器拆分代码

Question

我在我的 vue 应用程序中应用了延迟加载和代码拆分

但不知何故，当我更新我的代码并将其部署到生产时，只有一些块用新的哈希值更新。

 File                                      Size             Gzipped

  dist/js/chunk-vendors.8bacd999.js         1379.15 KiB      418.03 KiB
  dist/js/super-user.55f6d84e.js            230.82 KiB       43.40 KiB
  dist/js/user.75857fc3.js                  141.31 KiB       28.63 KiB
  dist/js/worker.3f845d96.js                116.95 KiB       27.14 KiB
  dist/js/super-user~user~worker.89497bd    95.72 KiB        26.28 KiB
  4.js
  dist/js/super-user~worker.de7f3513.js     41.93 KiB        14.24 KiB
  dist/js/app.d05288d8.js                   33.93 KiB        9.72 KiB
  dist/js/landing-page.abe82391.js          28.14 KiB        10.78 KiB
  dist/precache-manifest.9e6d4f8b3b203e5    6.23 KiB         1.84 KiB
  a7409c4e5738c04b0.js
  dist/service-worker.js                    1.04 KiB         0.61 KiB
  dist/css/chunk-vendors.c380a352.css       354.50 KiB       40.53 KiB
  dist/css/super-user~user~worker.b6103c    30.99 KiB        4.90 KiB
  9d.css
  dist/css/user.efb5b1bf.css                24.94 KiB        4.66 KiB
  dist/css/super-user.78d831e9.css          17.71 KiB        3.26 KiB
  dist/css/super-user~worker.3a0fff16.cs    12.84 KiB        1.87 KiB
  s
  dist/css/landing-page.de5bd5da.css        7.32 KiB         1.77 KiB
  dist/css/worker.7dcd23eb.css              5.72 KiB         1.63 KiB
  dist/css/app.3e078b33.css                 3.55 KiB         1.16 KiB

VS

  File                                      Size             Gzipped

  dist/js/chunk-vendors.8bacd999.js         1379.15 KiB      418.03 KiB
  dist/js/super-user.0cf42025.js            233.18 KiB       43.64 KiB
  dist/js/user.75857fc3.js                  141.31 KiB       28.63 KiB
  dist/js/worker.3f845d96.js                116.95 KiB       27.14 KiB
  dist/js/super-user~user~worker.89497bd    95.72 KiB        26.28 KiB
  4.js
  dist/js/super-user~worker.de7f3513.js     41.93 KiB        14.24 KiB
  dist/js/app.68802416.js                   33.93 KiB        9.72 KiB
  dist/js/landing-page.abe82391.js          28.14 KiB        10.78 KiB
  dist/precache-manifest.5d1728ab9e82dbe    6.23 KiB         1.84 KiB
  f01c617532cf35342.js
  dist/service-worker.js                    1.04 KiB         0.61 KiB
  dist/css/chunk-vendors.c380a352.css       354.50 KiB       40.53 KiB
  dist/css/super-user~user~worker.b6103c    30.99 KiB        4.90 KiB
  9d.css
  dist/css/user.efb5b1bf.css                24.94 KiB        4.66 KiB
  dist/css/super-user.822e51f6.css          17.71 KiB        3.26 KiB
  dist/css/super-user~worker.3a0fff16.cs    12.84 KiB        1.87 KiB
  s
  dist/css/landing-page.de5bd5da.css        7.32 KiB         1.77 KiB
  dist/css/worker.7dcd23eb.css              5.72 KiB         1.63 KiB
  dist/css/app.3e078b33.css                 3.55 KiB         1.16 KiB

我更新了一个视图，我们将其命名为 Feature.vue，并定义为

const Feature = () =>
  import(/* webpackChunkName: "user" */ "./views/Feature.vue");

但是在构建中用户模块的哈希没有更新，这导致很多用户看到我的应用程序的旧版本并且需要转到登录页面并刷新以刷新应用程序，如果他们刷新页面功能他们可以看到更改，但下次他们访问功能时，缓存将显示旧版本。

更具体地说，我的更改是一些 js 更改，那么至少 js 文件需要更改哈希值，有没有办法在每次更新时强制更改所有文件的哈希值？.

Answer 1

假设您有一个 Vue CLI 项目。在您的src文件夹下打开registerServiceWorker.js并确保在 Service Worker 检测到更改时刷新缓存：

import { register } from "register-service-worker";

if (process.env.NODE_ENV === "production") {
  register(`${process.env.BASE_URL}firebase-messaging-sw.js`, {
    registered() {
      console.log("Service worker has been registered.");
    },
    cached() {
      console.log("Content has been cached for offline use.");
    },
    updatefound() {
      // new content clear cache so user gets the new version
      caches.keys().then(cacheNames => {
        cacheNames.forEach(cacheName => {
          caches.delete(cacheName);
        });
      });
      console.log("New content is downloading.");
    },
    updated() {
      console.log("New content is available; please refresh.");
    },
    offline() {
      console.log(
        "No internet connection found. App is running in offline mode."
      );
    },
    error(error) {
      console.error("Error during service worker registration:", error);
    }
  });
}