Webpack e múltiplas línguas

[eliseumds]

Oi pessoal, alguém aqui tem experiência com apps Webpack em múltiplas línguas? Eu sei que há vários plugins/loaders disponíveis por aí mas nenhum pareceu atender às nossas necessidades, gerando somente um JSON gigante com todas as mensagens do app. Isso funciona pra apps pequenos, mas os nossos têm centenas de páginas com milhares de mensagens, então seria ideal que tivéssemos, no final, um arquivo de traduções pra cada async chunk (ou página), e que eles fossem carregados automaticamente pelo Webpack, por exemplo:

src/
  pages/
    HomePage.js
    AboutPage.js

// HomePage.js
export default function HomePage() {
  return (
     <div>
       <h1><FormattedMessage id="home_page.title" defaultMessage="HomePage" /></h1>
       ...
     </div>
  );
}

// AboutPage.js: mesmo esquema

O primeiro passo é extrair as mensagens pra enviar pros tradutores, e essa parte está resolvida.

Também temos que carregar language packs dependendo da língua, pra poder formatar números, datas, plurais, etc. Isso também está resolvido, no servidor e no browser.

Agora o problema é carregar somente as mensagens usadas pela página acessada, e na língua certa. Eu pensei no seguinte:

• Extrair todas as mensagens para um arquivo messages.json, tudo junto. Depois podemos converter isso num .po da vida e enviar pra tradução
• Tradutores finalizam o trabalho e enviam arquivos de volta pra gente, e no final temos algo como messages_pt-BR.json em algum diretório do projeto
• Agora rodamos Webpack que vai:
  • Gerar um arquivo HomePage_pt-BR.js e um AboutPage_pt-BR.js, que inclui as mensagens usadas somente por estas páginas
• Toda vez que uma página for carregada, o Webpack tem que carregar também o arquivo com as mensagens traduzidas

Uma forma de tornar isso mais eficiente seria ter somente um chunk traduzido por página, que inclui o source code + as mensagens traduzidas, tudo junto, daí não teria que carregar dois arquivos por página, mas aí haveria tretas com source maps que usamos muito pra debugar em produção.

Puts, e ainda tem a parte do servidor em NodeJS pois fazemos server-side rendering. Talvez faça sentido gerar um arquivo com todas as mensagens traduzidas somente pro servidor.

Desculpe-me por usar termos muito específicos, a real é que eu estou meio perdido.

[portothree]

Acompanhando.
Atualmente usamos globalize e localization do DevExtreme num projeto angular, mas também é um json gigante com todas as mensagens. Espero que alguém possa contribuir aqui.