enh: Split translations by components to only include needed strings in app bundles

[susnux]

☑️ Resolves

• Fix Split translations by component #4411

On build time:

1. Translations are extracted
2. Not translated strings are discarded (fallback to English)
3. Translation objects are compressed
4. Translations are split by files that use that translation string

Then a vite plugin will intercept all imports for 'src/l10n.js' and replace the content with a wrapper that only injects the used translations of the importing file.

Results

Tested with logreader app:

Before

Building logreader for production
vite v4.5.0 building for production...
✓ 1367 modules transformed.
./css/logreader-main.css       99.63 kB │ gzip:  16.69 kB
./js/Splitter-9140b094.mjs      0.97 kB │ gzip:   0.59 kB │ map:     3.29 kB
./js/logreader-main.mjs     1,645.71 kB │ gzip: 390.74 kB │ map: 5,876.41 kB

After

Building logreader for production
vite v4.5.0 building for production...
✓ 1366 modules transformed.
./css/logreader-main.css      100.89 kB │ gzip:  16.89 kB
./js/Splitter-9140b094.mjs      0.97 kB │ gzip:   0.59 kB │ map:     3.29 kB
./js/logreader-main.mjs     1,492.89 kB │ gzip: 371.30 kB │ map: 6,063.92 kB

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

Fixed the build issue

[susnux]

I fixed the issue with vite internal modules being present in output bundle, so it now also works if your app uses webpack ✔️

[ShGKme]

The dist looks good and correct without any extra translations, the translations on server and Talk work fine. Doesn't change a lot in size for 1 app, but multiplies for every app and library.

[ShGKme]

Thank you @susnux, awesome work!