Как правильно использовать I18next в production?

Question

[Alexander Leonchik]

Есть Х файлов с переводами расположены примерно так:

locales/ru/translation.json
locales/ru/modul1.json
locales/ru/modul2.json
locales/en/translation.json
locales/en/modul1.json
locales/en/modul2.json
и т.д.

Есть i18next и i18next-xhr-backend, конфиг вобщем то дефолтный.

i18n.js

import i18n from 'i18next'
import Backend from 'i18next-xhr-backend'

const options = {
  whitelist: ['en', 'ru'],
  fallbackLng: 'en',

  debug: true,

  interpolation: {
    escapeValue: false // not needed for react!!
  },

  react: {
    wait: true
  }
}

const i18nextOptions = {
  loadPath: '/public/locales/{{lng}}/{{ns}}.json'
}

i18n
  .use(Backend)
  .init({
    ...options,
    backend: i18nextOptions
  })


export default i18n

Файлы подгружаются на лету по мере необходимости за исключение translation, он базовый и подгружается всегда и сразу.

Собственно вопросы следующие:
1. Как правильно это упаковывать webpack-ом что бы был hash у файлов?
1.1. Как указать ссылку на файл в конфиге?
2. Чем и как лучше пережимать файлы?
3. Я их разместил в ./public, как их лучше закинуть в "билд"?

Пока из рабочих идей только одна, копировать файлы через CopyWebpackPlugin, через ManifestPlugin создавать манифест, дальше в конфиге парсить его. Но это очень, очень плохо...

P.S. может конечно я изначально что то не так делаю, но задача в том что бы клиенту подгружались файлы локализации по мере необходимости, а не все разом так как обьем очень большой.