i18n and code splitting #5433
Description
Is this a bug report?
No, rather a feature request.
i18n
There are ways to extract keys for internationalisation, like:
- standalone tool https://github.com/evenchange4/react-intl-cra
- babel macro https://github.com/evenchange4/react-intl.macro
Those methods can extract keys, and place it in either:
- one big file
- one file pre each JS files
Code splitting
CRA supports code splitting out of the box 👍, I would also like to split i18n the same way as JS splitted:
Loadable.Map({
loader: {
Bar: () => import(/* webpackChunkName: Bar */ './Bar'),
i18n: () => fetch(`./i18n/${lang}/bar.json`).then(res => res.json()),
},
render(loaded, props) {
let Bar = loaded.Bar.default;
let i18n = loaded.i18n;
return <Bar {...props} i18n={i18n}/>;
},
});Bar can contain other components (with static imports and i18n keys), for example Foo. So Bar.xxxx.chunk.js can require i18n keys for Foo and for Bar or it can happen that Foo, will be splitted in common.xxxx.chunk.js.
It would be nice to have Bar.xxxx.chunk.json and common.xxxx.chunk.json with i18n keys so appropriate translation files can be generated.
Obviously CRA should not lock-in users with some exact i18n library, but rather we can look into providing low level APIs so other libraries can reuse it. This idea still miss some details, for example, how i18n would work in development environment and maybe other.
Related tickets: