I'm interested in splitting my initial code in two chunks which are loaded asynchronously by the application using async/defer attributes. One for vendored libraries which rarely change and are big so that they could benefit from caching for a longer time, and another one containing the basic code required to load the initial page. This would be a smaller chunk which would probably change every week since we often deploy changes to production.
But we are interested in displaying a proper "loading..." page until all JS resources are downloaded. In case the app JS finishes loading before the vendor one (when vendor is not cached, this is very likely to happen) it should wait for the vendor one to be loaded.
I wasn't able to figure out how to achieve this using webpack. There are examples loading the vendor chunk synchronously so that the app code will always load after vendor, but it means the app won't render the proper "loading..." page due to it being blocked by the JS script. I could add the script to the end of the body but it's not optimal because it will increase the latency for the scripts to start downloading in comparison to adding the async script tags in the head of the document.
The code splitting documentation has an example on how to generate the vendor and app JS, but it only works if vendor is loaded before the app JS. Is there any way I can instruct the app bundle to wait for vendor to be loaded before running?
