当前位置：首页 > VUE

vue实现强缓存

2026-03-30 06:47:29VUE

强缓存的实现原理

强缓存通过设置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事件中清理旧缓存：

vue实现强缓存

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