Sorry, wrote this before coffee. I was referring to H/2 eliminating head-of-line blocking. HTTP/2 gives you one TCP connection for multiple requests rather than the 7 connection limit browsers impose on HTTP 1.x
HTTP/2 happened. HTTP/2 allows you to send HTTP requests over a single TCP connection per domain. Headers are compressed. The request overhead is minimal compared to HTTP/1.x.
Caching one big file has the draw back of busting the cache each time the file is updated for any small change.
Caching multiple small files allows you to have a finer grain cache. Only bust the things that updated. And, since it's all the same TCP connection it's now performant to load this way.
One of the more gnarly parts of ServiceWorker is having to clean up old caches during a version change. The workbox-build module generates revision hashes for your pre-cached assets and handles any cache clean ups for you.
Firebase YouTuber, Slacker, AngularFire contributor, and Stackoverflower here. Feel free to ping me personally in the Slack channel (davideast) of via email ([email protected]) to talk more about all of these problems you've hit. We work hard to make sure people get their questions answered so I'd love to have a discussion with you.