I've been trying to find an answer to this but could never find one:
I have four iframes loading on a parent page. Each of these I frames have javascript to be executed (slightly different JS in each one).
Currently, I've bundled all that JS into one file, which is in tag in each of the frames.
The behaviour I see is that the browser emits only one request to that script, since it's the same in each frame.
My question is: What if I wanted smaller bundles, by splitting that JS file into 4 smaller ones. how are script tags loaded inside an iframe ?
If they're loaded async: I might gain some performance from it. If they're loaded one after the other: Then having a larger bundle and avoiding multiple round trips might be better.
Iframes work almost exactly like parent pages do. Think of it like opening up several tabs in your browser at the same time, each one tries to load as quickly as possible, independent of the other pages.
Using a single large bundle means that once it has finished downloading in any iframe, the browser will cache it and all other iframes requesting it will load faster from the cache.
Using smaller bundles means that each iframe might finish load sooner if it's particular script finishes before the other iframes, but there's no guarantee which order they'll finish. They'll all try to asynchronously load their respective files.