What is the correct way to use I18next in production?

Question

Internationalization and localization

There are X translation files located like this:
locales/ru/translation.json
locales/ru/modul1.json
locales/ru/modul2.json
locales/en/translation.json
locales/en/modul1.json
locales/en/modul2. json
etc.
There are i18next and i18next-xhr-backend, the config is generally default.

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

Files are loaded on the fly as needed, with the exception of translation, which is basic and is loaded always and immediately.
Actually, the questions are as follows:
1. How to properly pack it with webpack so that the files have a hash?
1.1. How to specify a link to a file in the config?
2. What is the best way to compress files?
3. I posted them in ./public, what is the best way to put them in the "build"?
So far, there is only one working idea, copy files through CopyWebpackPlugin, create a manifest through ManifestPlugin, then parse it in the config. But this is very, very bad...
PS Maybe, of course, I'm doing something wrong initially, but the task is to load localization files to the client as needed, and not all at once, since the volume is very large.