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

Question

我申请 lazy loading and code splitting在我的 Vue 应用中

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

 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

我更新了一个 View ，我们称之为Feature.vue，定义为

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

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

另外更具体地说我的更改是一些js更改，那么至少js文件需要更改哈希有一种方法可以强制更改所有文件的哈希每次更新？。。 p>

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);
    }
  });
}