Dynamic locale import with webpackMode=lazy results in hundreds of chunks

[jbaldassari]

I just wanted to post this here in case it helps anyone else. I noticed that when dynamically importing locales with webpack and using the default options (no mode specified or webpackMode: "lazy"), webpack generates 500+ chunks which are loaded serially, significantly impacting app load time.

Example:

await import(`date-fns/locale/${locale}/index.js`);

To avoid this, pass the webpack hint webpackMode: "lazy-once" (see docs here), which still keeps the locales out of the main chunk but causes all of the locales to be loaded together as a single chunk instead of individual chunks. This results in much faster load time. Example:

await import(
  /* webpackMode: "lazy-once", webpackChunkName: "date-fns" */ `date-fns/locale/${resolvedLocaleCode}/index.js`
);

The before and after screenshots from source-map-explorer are below:

Before:

After:

[joaopedrodcf]

Having them separated and loaded async isn't better ?