SFC translations and code splitting

[Inzeppelin]

We really like the idea of keeping translations close to components in this way

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

This allows us to use async component import and load translations required only for particular component. But it doesn't allow us to use lazy loading for different languages. All translations for all languages will be bundled in the same chunk.

It would be really awesome if we could have a mechanism to split code by component as well as by language. Assuming we can build two versions of component for en and ja languages and load only needed translations for the selected language. May be we can try to separate bundles at the very top level of our application by creating two different entry points. But for now we didn't find a way to implement this using existing vite plugins.

Is there any idea for creating such architecture? May be someone can suggest right direction where to dig.