Fetch the locale bundle in parallel with the main JS bundle

[rik]

The locale bundle is fetched when require(`bundle-loader?name=[name]-i18n-[folder]!../../locale/${locale}/amo.js`) is executed. React.render happens after that file has been fetched and executed. Therefore it would be a good thing to fetch it in parallel rather than serially.

Example: https://www.webpagetest.org/result/210519_AiDc9W_6e4156e19a28284241d6cac7ce14177d/3/details/

Advantages

• The SPA will be interactive sooner.
• Whenever the LCP is dependant on the changes made by React.render (such as the recent experiment), it will happen sooner.

Sooner here is in the order of one round trip to the CDN (which can be far in Asia, Africa and South America).

Drawbacks

• A bit of bandwidth is taken away from other resources but there is a bundlesize check to make sure it is less than 33KB (this check could be tightened since the current largest is Russian at 24.91KB)
• This could increase the FID score by having one big task blocking the main thread instead of two smaller ones. If we see that in the metrics, we can solve it by adding one setTimeout to re-introduce the main thread pause (but without the network pause)

Other

https://github.com/mozilla/addons-frontend/issues/6192 would also have the same advantages listed here.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If you think this bug should stay open, please comment on the issue with further details. Thank you for your contributions.

[bobsilverberg]

@diox Do you have any thoughts about whether we should keep this on our backlog?

[diox]

I don't think we have the bandwidth to deal with this right now.

Also, I suspect that if we wanted to make locale bundle fetching faster, it would be easier for us to try to reduce bundle size instead, either the main one or the locale specific ones. For instance switching to a different format that doesn't force us to have the full english strings as the keys would help quite a bit.

[ziir]

What about <link rel=prefetch> the locale bundle instead? Should give the browser a slight head start in loading the bundle with a low priority, requires no other changes & wouldn't impact existing bundle loading/execution priorities & order.