Workbox Service Worker 重复加载或不从缓存中读取？
Workbox Service Worker duplicate loading or not reading from cache?
我这里有这两张图片：
为什么在第一张图片中，在 Google Chrome Inspector Network 选项卡中，每张图片有两个操作：
- 从缓存中获取？
- 来自服务器的 XHR？
这是否意味着我每次加载此页面时都在重新下载文件？应用程序是否应该只引用缓存并仅在文件更新时才下载？
我是否必须配置 webpack 以便我的资产在其名称中使用哈希值，以帮助像我的 .js 文件一样进行版本控制？
编辑：
这是在开发模式下，或者 webpack-dev-server
您正在使用 StaleWhileRevalidate 策略，该策略会立即从缓存中响应，但会自动执行 fetch() "in the background" 以确保给定的资产对于下次请求时。
因此，您所看到的是正常的。
如果您采用向您的资产添加哈希的方案，然后使用像 CacheFirst is more appropriate, since you'll know that if you have an entry in the cache for a given URL, it's always going to correspond to the exact content you're expecting. The one additional thing that you'd want to do in that case, though, is to put some sort of upper bound on your cache sizes, via workbox.expiration 这样的策略，这样您就不会最终存储同一资产的越来越多的旧版本.
我这里有这两张图片：
为什么在第一张图片中，在 Google Chrome Inspector Network 选项卡中，每张图片有两个操作：
- 从缓存中获取？
- 来自服务器的 XHR？
这是否意味着我每次加载此页面时都在重新下载文件？应用程序是否应该只引用缓存并仅在文件更新时才下载？
我是否必须配置 webpack 以便我的资产在其名称中使用哈希值，以帮助像我的 .js 文件一样进行版本控制？
编辑： 这是在开发模式下，或者 webpack-dev-server
您正在使用 StaleWhileRevalidate 策略，该策略会立即从缓存中响应，但会自动执行 fetch() "in the background" 以确保给定的资产对于下次请求时。
因此，您所看到的是正常的。
如果您采用向您的资产添加哈希的方案，然后使用像 CacheFirst is more appropriate, since you'll know that if you have an entry in the cache for a given URL, it's always going to correspond to the exact content you're expecting. The one additional thing that you'd want to do in that case, though, is to put some sort of upper bound on your cache sizes, via workbox.expiration 这样的策略，这样您就不会最终存储同一资产的越来越多的旧版本.