Workbox Service Worker是否重复加载或不从缓存中读取？

Question

我在这里有这两张图片：

为什么在第一张图片中，在Google Chrome督察网络标签中，为每张图片分别有两个操作：

1. 从缓存中获取？
2. 来自服务器的XHR？

这是否意味着每次加载此页面时，我都会重新加载文件？应用程序应该只是引用缓存而只是在文件更新时才下载？

我是否必须配置webpack以便我的资产在其名称中使用哈希值来帮助我的.js文件进行版本控制？

编辑： 这是在开发模式，或webpack-dev-server

Answer 1

您正在使用StaleWhileRevalidate策略，该策略将立即从缓存中进行响应，但会在后台自动执行fetch()“以确保下一次给定资产是新鲜的这是它的要求。

因此，您所期待的是什么。

如果您使用为您的资产添加哈希的方案，那么使用CacheFirst之类的策略更合适，因为您知道如果您在缓存中有给定URL的条目，那么它是始终与您期望的确切内容相对应。但是，在这种情况下，您想要做的另一件事是通过workbox.expiration在缓存大小上设置某种上限，这样您就不会存储不断增加的内容。同一资产的旧版本数量。