应用程序更新时刷新缓存不起作用-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，并确保在服务工作者检测到更改时刷新缓存：

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