Splitting locales.js into files per language

[klunderjeff-printabout]

Hi all,

After we build our project, we get one locales.js file, which holds all texts in all used languages. Performance wise this isn't great. Reading the documentation and editing our i18n.ts file as prerscribed, no changes are visible after a build. We would expect to get several locales.js files (locales-nl.js, locales-fr.js, etcetera).

Using rspack as our bundler, we initially had below snippet. We commented this out, but perhaps it needs editing to get the file splitting to work?

locales: {
     test: /[\\/]react[\\/]locales[\\/]/,
     name: 'locales',
     chunks: 'all',
},

Project info, using:

• react
• rspack
• typescript
• i18n / lingui
• we have a local folderstructure like
  react
  |_ locales
  |_ subfolder per language (nl-NL, fr-FR, de-DE)
  |_ messages.po
  |_ messages.ts
  |_ messages.d.ts

[timofei-iatsenko]

Show the snippet which is loading the catalog. I'm 95% sure you are just importing them without await import(...)

[klunderjeff-printabout]

Small update: when editing the splitChunks part inside my rspack.config.ts, I now get separate locales files in the build folder. Not getting used yet so it seems, but we're getting there.. For clarity, below snippet is now in use (from rspack config):

locales: {
    test: /[\\/]react[\\/]locales[\\/].+\.ts$/,
    name(module) {
        const languages = getLanguages();
        for (const lang of languages) {
            if (module.context.includes(lang)) {
                return `locales-${lang}`;
            }
        }
        return 'locales';
    },
    chunks: 'all',
},

[timofei-iatsenko]

Remove everything from chunk splitting plugin. You don't need it. I don't know your expectations, but

export async function dynamicActivate(locale: string) {
    const { messages } = await import(`@/locales/${locale}/messages`);

    i18n.load(locale, messages);
    i18n.activate(locale);
}

That is enough to have dynamic code splitting in every modern and older bundler including rollup, rspack, turbopack, vite, esbuild etc.

If your expectation to have a chunk named with locales-${lang}, you can play with splitChunks configuration or magic comments. But generally who cares how built artifact is called?

[klunderjeff-printabout]

Well, what I'm after - putting the code aside for a minute - is having a locales file per used language. So lets say only the DE content is loaded when the .de site is visited. Or only the FR content is loaded when visiting the .fr site. I tried removing the whole splitChunk bit earlier, but when I build the project, I don't get separate files. When doing the latest edits, for the first time I get these locale-[x].js files inside the build folder.

So not completely agree with your statement that removing the splitChunk bit would be enough. At least not for our codebase.

[timofei-iatsenko]

I'm not going to argue with you, if you goal to see the locale-[x].js yes, use splitChunks, if your goal is

So lets say only the DE content is loaded when the .de site is visited. Or only the FR content is loaded when visiting the .fr site.

You don't need splitChunks plugin, if you use await import it will create separate chunks anyway. If it's not the case, search you codebase, you probably have another place where catalogs are imported statically.

[klunderjeff-printabout]

Not trying to get into an argument here, just want to get this thing working..

Inside our lingui.config.js file, we do have something about those catalogs. Perhaps that's the cause?

module.exports = {
    catalogs: [
        {
            include: ['react'],
            path: 'react/locales/{locale}/messages',
        },
    ],
    compileNamespace: 'ts',
    fallbackLocales: {
        'nl-BE': 'nl-NL',
        'fr-BE': 'fr-FR',
    },
    format: 'po',
    locales: ['nl-NL', 'nl-BE', 'fr-BE', 'de-DE', 'fr-FR'],
    service: {
        name: 'TranslationIO',
        apiKey: 'xxx',
    },
    sourceLocale: 'nl-NL',
};

EDIT: Never mind: this part is needed offcourse..