Are the translations loaded reduced to its minimum?

[binajmen]

Hi,

After reading two large issues from SvelteKit github, I decided to give a try with typesafe-i18n. But I'm concerned about one question: are the loaded translations limited to the strict minimum when I hit a specific route ?

To clarify the question, having 100 translations, when I visit a /very/long/route using only 5 translations, is the i18n payload limited to these 5 translations or am I loading the full pack?

I'm having a hard time to find this information :)

[ivanhofer]

Hi @binajmen,

no, currently all translations of the selected locale will be loaded.

Workaround

You can manually split them if you think they are too large via the namespaces feature. So you could structure your translations like this:

src/i18n/en

 - logged-out
    - index.ts # login, reset-password etc.
 - dashboard
    - index.ts # everything you'll display on the dashboard
 - settings
    - index.ts # settings page
 - index.ts # common translations

Then you can load the required namespaces depending on the route your user visits.

Something in this direction is planned for the future

I have some build-time optimizations in the pipeline, but I haven't started implementing them yet.

Why it is not that important to only load the strings you are using:

1. The runtime of typesafe-i18n is really small
   Witch around 1kb of runtime code, typesafe-i18n is already small. So adding i18n to your application will probably not decrease the performance. In a project I use a dictionary file with over 750 strings in it and it is about 13kb (gzipped) in size. Just the runtime of other i18n libraries will be bigger than runtime + translations of that application.
2. strings are not that "expensive" than JavaScript
   It makes a huge difference if you load 20kb of strings or 20kb of application code. The application code will need to parsed by the browser which will take some time. The translation files don't need that much time to parse.
3. your translations will be cached
   You don't have to split translations for smaller routes into different parts with just 2-3 translations. If you combine multiple routes and your user visits route-1, and then route-2, the translations are already cached by the browser
4. SSR
   typesafe-i18n can be used inside server-side-rendered pages. So when the browser loads the HTML, the user already sees the content. All your component code and the locale dictionary will be loaded in the background. Then the hidration kicks in to add interactivity to the application. It doesn't make a huge difference if you load a 3kb or a 10kb dictionary.

[binajmen]

Thank you for this extensive and clear response ;)