Javascript：有什么方法可以检查资产是否存在于浏览器缓存中？

Question

我正在尝试优化我的 webpack 包大小。查看我的供应商包，最大的块是 ReactDOM + React。

我在想我可以利用 webpack 的 externals 配置选项让 CDN 为这些资产提供服务，就像我目前使用 jQuery 所做的那样。不过我检查了一下，我的个人浏览器没有缓存这些资产，所以我开始怀疑其他人是否会缓存。如果大多数人还没有缓存这些资产，那么由于额外的往返行程，从外部加载它们弊大于利。

有人知道用于检查当前是否缓存资产的跨浏览器解决方案吗？这样我就可以对我的用户群进行一些分析，看看将这些更大的资产外部化是否是一个好的举措。

我已经看到大多数现代浏览器的 Cache API。不过，我仍然需要 Safari/IE 的解决方案。

Answer 1

由于 script files are loaded in order 您可以花时间在反应包括之前和之后。如果该时间低于几毫秒，则它来自缓存并且时间正是解析所需的时间，否则它是从服务器加载的并且您有网络延迟：

<script>
  var start = Date.now();
 </script>
 <script src="cdn/react.min.js" ></script>
 <script>
   var loadTime = Date.now() - start;
   // Do whatever with that
   if(loadTime < 10) alert("cached");
</script>

虽然浏览器速度非常慢而用户速度非常快，但您可能会得到误报和漏报

Answer 2

您可以使用 Resource Timing API 来查找所有已加载的资源，并使用每个资源的 transferSize 属性来了解它是否是从缓存中加载的。传输大小为 0 表示缓存负载。大于 0 的值表示实际通过网络传输，因此未缓存资源。

const resourcesStatus = window.performance.getEntriesByType('resource')
  .reduce(function(formattedOutput, resourceDetails) {
    return formattedOutput.concat({
      resourceName: resourceDetails.name,
      cached: resourceDetails.transferSize ? false : true
    })}, [])

Javascript：有什么方法可以检查资产是否存在于浏览器缓存中？

Javascript: Any way to check if an asset is present in browser cache?

javascript

optimization

caching

cdn

webpack