1

I am trying to optimize my webpack bundle sizes. Looking at my vendor bundle, the largest chunk is ReactDOM + React.

I was thinking I could take advantage of webpack's externals config option to let a CDN serve these assets as I am currently doing with jQuery. I checked though and my personal browser did not have these assets cached, so I began to wonder if others would. If most people don't have these assets already cached, loading them externally would do more harm than good due to the extra round trips.

Anyone know of a cross browser solution for checking if an asset is currently cached? This way I could generate some analytics on my user base to see if externalizing these larger assets would be a good move.

I have seen the Cache API for most modern browsers. I still need a solution for Safari/IE, though.

thedarklord47
  • 3,183
  • 3
  • 26
  • 55

2 Answers2

1

You may use the Resource Timing API to find all the resources that were loaded and the transferSize property of each resource to know if it was loaded from cache. A transfer size of 0 indicates cached load. Anything more than 0 indicates actual transfer through the network and hence uncached resource.

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

Due to the fact that script files are loaded in order you could just take the time before and after reacts include. If that time is below a few milliseconds, it comes from cache and the time is just what it takes to parse, otherwise it was loaded from a server and ypu got network latency:

<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>

You probably get false positives and negatives with very slow browsers and high speed users though

Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
  • I was hoping for a solution which wouldn't require me to actually load the CDN assets. Something I could implement with no immediate performance consequence to decide whether making the change would be beneficial. Its not a bad solution, but a little too "just do it and see what happens". I might go with something like this if no alternatives come up. – thedarklord47 Jun 14 '18 at 20:53
  • @thedarklord47 I don't think that is possible. But we'll see, maybe someone else knows a way – Jonas Wilms Jun 14 '18 at 20:55
  • It is with the `Cache` API, but you could be right for Safari/IE. – thedarklord47 Jun 14 '18 at 20:56
  • page load performance is what lead to needing bundle size optimization in the first place, so its somewhat hard to rationalize something with a risk of making it even worse haha – thedarklord47 Jun 14 '18 at 20:58
  • seems there is no good way to do this, so accepting the only answer I got – thedarklord47 Jul 02 '18 at 22:14