如何在VueJS PWA中禁用prefetch并解决缓存更新与旧缓存清理问题

API 探路者

2026-9-30

解决方案

1. 配置缓存标识与自动旧缓存清理

在workboxOptions中新增cacheId和cleanupOutdatedCaches配置：

cacheId为当前应用缓存的唯一标识，每次部署大版本时修改标识后缀（如从app-v1改成app-v2），Workbox会自动删除所有旧标识对应的缓存
cleanupOutdatedCaches开启后，新Service Worker激活时会自动清理所有不符合当前规则的旧缓存

2. 增加缓存过期限制

在runtimeCaching的options中添加expiration配置，限制缓存的最大数量和最长有效期，超出限制时自动删除最久未使用的缓存，避免体积无限增长：

maxEntries根据你的项目实际资源数量设置，普通单页应用设置50-100即可
maxAgeSeconds设置缓存的最长保留时间，按需调整
purgeOnQuotaError开启后，浏览器缓存配额不足时会自动清理该缓存组的内容，避免缓存报错

完整配置参考

module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch-index')
    config.plugins.delete('preload-index')
  },
  pwa: {
    workboxOptions: {
      exclude: [/.*/],
      cacheId: 'your-app-v1', // 大版本部署时修改版本号
      cleanupOutdatedCaches: true,
      runtimeCaching: [{
        urlPattern: new RegExp('^https://example.com/.+'),
        handler: 'CacheFirst',
        options: {
          cacheableResponse: {
            statuses: [200]
          },
          expiration: {
            maxEntries: 60,
            maxAgeSeconds: 7 * 24 * 60 * 60, // 缓存保留7天
            purgeOnQuotaError: true
          }
        }
      }]
    }
  },
  // 其余业务配置
}