Vue.js 项目强制更新浏览器缓存的详细指南
2024-03-21 21:14:41
强制更新 Vue.js 项目的浏览器缓存
在使用 Vue.js 应用程序时，每当运行构建命令时，都会生成新的 dist/* 文件。然而，当你加载到服务器并通过浏览器打开页面时，它却加载了旧版本的代码（估计是从缓存中加载的）。当刷新页面时，它才会加载新代码。为了解决这个问题，有几种方法可以强制更新浏览器缓存：
添加缓存控制元标记
在 index.html 文件中添加元标记以禁用缓存：
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="-1">
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
<meta http-equiv="pragma" content="no-cache">
添加版本哈希到文件名
一种更可靠的方法是将版本哈希添加到每个文件的名称中。这将强制浏览器每次加载新版本的代码，因为文件名不同。在构建过程中，可以使用 webpack 或 rollup 之类的打包工具，添加一个插件以自动将哈希添加到文件名。
使用 service worker
如果你想在旧文件被删除后自动刷新浏览器，可以使用 service worker。service worker 是驻留在浏览器中的脚本，可以拦截网络请求和控制缓存。使用 service worker，你可以监听文件更改，并提示浏览器在检测到更改时刷新页面。
代码示例
以下是使用 service worker 强制刷新浏览器的代码示例：
// service-worker.js
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-cache').then((cache) => {
return cache.addAll([
// 添加你的静态资源文件
]);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
// 如果缓存中有资源，则返回缓存资源
if (response) {
return response;
}
// 如果缓存中没有资源，则从网络获取并更新缓存
return fetch(event.request).then((response) => {
if (response.ok) {
caches.open('my-cache').then((cache) => {
cache.put(event.request, response);
});
}
return response;
});
})
);
});
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cacheName) => {
// 删除旧版本缓存
if (cacheName !== 'my-cache') {
return caches.delete(cacheName);
}
})
);
})
);
});
注意
- 以上方法适用于生产环境，在开发环境中通常不需要禁用缓存。
- 如果你的服务器支持 HTTP 缓存头，你还可以使用
Cache-Control: no-cache头来禁用缓存。
常见问题解答
-
为什么需要强制更新浏览器缓存？
通常情况下，浏览器会缓存静态文件以提高加载速度。然而，当新版本的文件部署时，浏览器可能会继续从缓存中加载旧文件，导致问题。 -
添加缓存控制元标记和添加版本哈希到文件名哪种方法更好？
添加版本哈希到文件名是一种更可靠的方法，因为它确保每次加载新版本的代码，而不管缓存设置如何。 -
service worker 如何工作？
service worker 是驻留在浏览器中的脚本，可以拦截网络请求和控制缓存。当检测到文件更改时，service worker 可以提示浏览器刷新页面。 -
如何启用 service worker？
在index.html文件中注册 service worker：<script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js'); } </script> -
禁用缓存后，我的网站会变慢吗？
禁用缓存会增加初始加载时间，因为浏览器需要从网络加载所有文件。但是，它可以防止加载旧版本的代码，从而提高可靠性和用户体验。
