VitePWA插件中资产文件预缓存配置的注意事项

问题背景

在使用VitePWA插件(vite-plugin-pwa)进行PWA开发时，开发者经常需要将静态资源文件(如图片、JSON等)预缓存到Service Worker中。在从0.20.0版本升级到0.20.1版本后，部分开发者发现原先通过includeAssets配置能够正常预缓存的资源文件突然失效了。

技术原理分析

VitePWA插件提供了两种主要方式来预缓存静态资源：

1. public目录资源：放置在项目public目录下的文件会被Vite自动复制到输出目录(dist)，这些文件可以通过includeAssets配置项指定哪些需要被Service Worker预缓存。

2. src/assets目录资源：位于src/assets目录下的资源文件处理方式有所不同。Vite只会打包那些被代码显式引用的资源文件(通过import或img标签src属性等)，未被引用的文件不会出现在最终构建产物中。

版本变更带来的影响

在0.20.0版本中，一些开发者发现可以通过includeAssets配置包含src/assets目录下的资源文件。这实际上是特定版本下的一个非预期行为，因为按照设计原则，includeAssets应该只处理public目录下的文件。

0.20.1版本修复了这个问题，将内部使用的glob库从fast-glob替换为tinyglobby，同时修正了资源收集的行为，使其严格遵循public目录的限制。

正确解决方案

对于需要预缓存src/assets目录下资源的需求，应该使用injectManifest.globPatterns配置项。这个配置专门用于指定需要被Service Worker预缓存的资源文件路径模式，不受public目录限制。

示例配置：

{
  injectManifest: {
    globPatterns: [
      '**/*.{js,css,html}',
      'assets/images/**/*.{png,jpg}'
    ]
  }
}

最佳实践建议

1. 将需要预缓存的通用静态资源(如favicon、robots.txt等)放在public目录下，并使用includeAssets配置。

2. 对于应用内容相关的资源(如图片、JSON数据等)，建议：

   • 通过代码显式引用它们(确保它们会被Vite处理)
   • 使用injectManifest.globPatterns将它们加入预缓存列表

3. 注意区分开发环境和生产环境的资源处理方式，确保测试覆盖预缓存行为。

通过理解VitePWA插件对资源处理的内部机制，开发者可以更准确地配置预缓存策略，避免因版本升级带来的意外行为变化。