Feature request: Collocate extracted and compiled messages per component

[revskill10]

I'd love to have extracted/compiled messages files to be collocated per components when running with lingui extract and lingui compile instead of having all terms located in one big messages file.

This is for code splitting when SSR.

Currently, i have to manually change the locale folder when running compiling to enable this feature.
Suggestion: If the extract and compile allow for --mode=component, we can achieve this feature.

There should be a helper to merge those splitted compiled messages.js file into one messages.js file too. Something like this:

const mergeCatalogs = (language, catalogs) => {
  let cats = {
    [language]: {
      languageData: {},
      messages: {}
    }
  }
  catalogs.forEach(it => {
    cats[language].messages = {
      ...cats[language].messages,
      ...it.messages
    }
  })
  return cats
}

Recommended folder structure:
before:

- components
    Foo.js

after:

- components
   Foo/index.js
- locales
   Foo/en/messages.po
   Foo/en/messages.js
   Foo/ru/messages.po
   Foo/ru/messages.js

[tricoder42]

There's a PR to add similar functionality #326

[revskill10]

@tricoder42 In the mean time, i set a LOCALE_PATH variable when running lingui, it solved this issue for me.
The only thing is that, i need to merge all messages.js into one messages.js, is there a function to do it ?

[toolness]

Wait, does #326 actually solve all of @revskill10's problem? It seems like he wants splitting of both source catalogs and compiled message catalogs, but RFC-002 (which #326 implements) has a big note at the top that reads:

This proposal is about splitting source catalogs. Compiled message catalogs always contain all messages in project for now.

This makes it seem as though #326 will actually only solve part of the problem addressed in this issue, and will not actually make things easier for folks who would like to split their compiled message catalogs to be more in-line with their code splitting approach.

This is a challenge I currently face: our whole application, some of whose pages contain non-trivial amounts of text, is split up via react-loadable to ensure that each page only loads what it needs, but having a single compiled message catalog partially negates the benefit of this approach, since it means that every single page's text will need to be loaded in order for the user's browser to render the current page.

Update 2019-11-14: It looks like #503 is about addressing the problem I've described here.