javascript - Refresh cache on App update not working - Vue, webpack, router split code - Stack Overflow

admin管理员组

文章数量:1302319

I apply lazy loading and code splitting in my vue app

But somehow when I update my code and I deploy it to production only some chunks are updated with a new hash.

 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

I've updated a view, we will call it Feature.vue, and is defined as

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

But in the build the hash of the user modules are not updated, this causes to a lot of users see old versions of my app and need to go to the landing page and make a refresh to refresh the app, if they refresh the page on feature they can see changes, but the next time they access to feature the cache will show the old version.

Also to be more specific my changes are some js changes, then at least the js file needs to change the hash there is a way to force change hash of all files every update?.

I apply lazy loading and code splitting in my vue app

But somehow when I update my code and I deploy it to production only some chunks are updated with a new hash.

 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

I've updated a view, we will call it Feature.vue, and is defined as

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

But in the build the hash of the user modules are not updated, this causes to a lot of users see old versions of my app and need to go to the landing page and make a refresh to refresh the app, if they refresh the page on feature they can see changes, but the next time they access to feature the cache will show the old version.

Also to be more specific my changes are some js changes, then at least the js file needs to change the hash there is a way to force change hash of all files every update?.

• javascript
• vue.js
• caching
• webpack
• deployment

Share Improve this question Follow edited Feb 19, 2020 at 19:38 BlueSeph asked Feb 19, 2020 at 19:01 BlueSephBlueSeph 58211 gold badge99 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

assuming you have a Vue CLI project. under your src folder open up registerServiceWorker.js and make sure to flush the cache when the service worker detects changes:

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

本文标签：