chore(new-client): preload key requests

[josepot]

Currently when we run the Lighthouse performance test we can appreciate the following suggestion: "Preload key requests", and then the report shows a list with 6-7 assets that should have been pre-loaded with a <link rel="preload /> tag.

Lighthouse is correct, those assets are being loaded immediately after the parser evaluates the "shell" bundle, so it makes sense to have them as "preload" links in the index.html file. I thought that Vite would be able to do that automatically if instead of declaring our lazy components like this:

const LiveRatesCore = lazy(() => import("./LiveRatesCore"))

we declared them like this:

const mod = import("./LiveRatesCore")
const LiveRatesCore = lazy(() => mod)

The reason being that with the first declaration the bundler can't know when that component would be used (mounted). However, with the second declaration the bundler should IMO be able to figure out that the dynamic import is being requested during bootstrap time... So, I think that ideally Vite should handle those cases, that's why I've opened this issuse: vitejs/vite#2460 .

In the meanwhile, though, I've found a rollup plugin that we can use with Vite for now if we tweak it a bit... So, that's what this PR is about.

[github-actions]

(auto-deploy) The deployment for this Pull Request has been destroyed.

[josepot]

Nice! I love the preview 🤩! So, yep, this is indeed making a difference in terms of performance.

Just to be clear, though: this is a workaround while we wait to have some resolution on the issue that I've opened on Vite's repo. If the resolution is that this is the expected behavior, then what I will do is to create a custom plugin for our needs based on this code. This is one of the reasons why I love Vite, because we can easily customize it 🙂. If on the other hand Vite makes a fix/improvement to support this behavior OOTB, then I will get rid of this when we upgrade Vite.