vue实现强缓存
强缓存的实现原理
强缓存通过设置HTTP响应头中的Cache-Control和Expires字段实现。浏览器在请求资源时会先检查这些字段，如果未过期则直接从本地缓存读取，不发送请求到服务器。
在Vue项目中配置强缓存
通过webpack配置输出文件名哈希
在vue.config.js中配置文件名添加内容哈希，确保文件内容变化时文件名改变：
module.exports = {
configureWebpack: {
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js'
}
}
}设置Nginx服务器缓存头
在Nginx配置中添加缓存头，对静态资源设置长期缓存：
location / {
try_files $uri $uri/ /index.html;
# 静态资源缓存一年
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, no-transform";
}
}使用Service Worker实现离线缓存
注册Service Worker并缓存静态资源：
// sw.js
const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/static/js/main.js',
'/static/css/main.css'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});缓存更新策略
使用版本号控制缓存
在文件名或请求URL中添加版本号参数：
// 动态加载带版本号的资源
const version = 'v1.0.0';
loadScript(`/static/js/main.js?version=${version}`);清除旧缓存
在Service Worker的activate事件中清理旧缓存：
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
});注意事项
- 对index.html文件不应设置长期缓存，确保用户能获取最新版本
- API请求通常不应使用强缓存，需要设置
Cache-Control: no-cache - 文件哈希能有效解决缓存更新问题，内容变化时文件名改变会强制浏览器获取新资源
- 测试阶段可暂时禁用缓存方便调试
