Question

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

我以为我可以利用webpack的externals配置选项让CDN提供这些资产，就像我目前正在使用jQuery一样。我查了一下，我的个人浏览器没有缓存这些资产，所以我开始怀疑其他人是否会这样做。如果大多数人都没有缓存过这些资产，那么从外部加载这些资产会带来弊大于利的效果。

任何人都知道用于检查资产当前是否已缓存的跨浏览器解决方案？通过这种方式，我可以在我的用户群上生成一些分析，看看外部化这些较大的资产是否是一个很好的举措。

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

Answer 1

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

<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：检查资源是否存在于浏览器缓存中的任何方式？

2 个答案: