Summary
The next generation of web developers will be able to make the most of the power of the web. The next generation will be capable of making the most out of the internet.
While code splitting offers multiple benefits, it also has some drawbacks. By default, chunks are downloaded only when needed. This can introduce noticeable delays in two areas.
This script holds a mapping between each route and the files that should be preloaded for that route. When executed, it preloads the necessary files for the current path by manually adding them to the HTML page.
Luckily, the bundler exposes these dependencies as "chunk groups" in its API. I recommend creating a plugin that checks the compilation output to determine the names of the files each chunk depends on.
The script is executed on page load before the page load. It adds a link to each file that should be preloaded on the current path (window.location.com) The script is inserted into the HTML file before any other script.
If you plan to use this pattern in production, you’ll probably want to at least improve the following areas. For simplicity, I’ve left some implementation details to the reader.
As an alternative to the previous drawback, I’d recommend using a Service Worker to precache all your app chunks. Google’s Workbox is my go-to solution for precaching.
