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?.
Share Improve this question edited Feb 19, 2020 at 19:38 BlueSeph asked Feb 19, 2020 at 19:01 BlueSephBlueSeph 5821 gold badge9 silver badges26 bronze badges1 Answer
Reset to default 10assuming 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);
}
});
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1741710636a4362015.html
评论列表（0条）