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

Question

我这里有这两张图片：

是否有理由说明为什么在第一张图片中，在 Google Chrome Inspector 网络选项卡中，每个图片都有两个操作：

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

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

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

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

Answer 1

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

因此，您所看到的是预期的。

如果您使用向您的资产添加哈希的方案，那么使用类似的策略CacheFirst更合适，因为您会知道，如果您在给定 URL 的缓存中有一个条目，它总是会对应于确切的内容你期待。但是，在这种情况下，您还想做的另一件事是在缓存大小上设置某种上限 via workbox.expiration，这样您就不会最终存储越来越多的旧版本相同的资产。