Refre sh кеш при обновлении приложения не работает - Vue, веб-пакет, разделенный код маршрутизатора

Question

Я применяю отложенную загрузку и разбиение кода в моем vue приложении

Но каким-то образом, когда я обновляю свой код и внедряю его в производство, только некоторые фрагменты обновляются с новым ха sh.

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

Но в сборке пользовательские модули не обновляются, поэтому многие пользователи видят старые версии моего приложения и нуждаются в go на целевой странице и сделайте refre sh, чтобы обновить sh приложение, если они обновят sh страницу функции, в которой они увидят изменения, но в следующий раз, когда они получат доступ к функции, кеш отобразит старую версию.

Также, чтобы быть более точным c мои изменения - это некоторые js изменения, тогда как минимум файл js должен измениться ha sh есть способ принудительно изменить ha sh всех файлы каждое обновление? .

Answer 1

при условии, что у вас есть Vue CLI проект. в вашей папке src откройте registerServiceWorker.js и убедитесь, что в кеше sh кеш, когда работник службы поддержки обнаружит изменения:

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