Объедините несколько кусков веб-пакета

Question

Я работаю над большим приложением, в котором мне нужно асинхронно загрузить несколько переводов для одной и той же локали (т.е. переводы приложений + моментальный перевод локали + другие).

Итак, каждый раз, когда пользователь меняет локаль, нам нужно что-то вроде:

translations.en.json
moment/locales/en.json
other/en.json

Мне лень их загружать, но я бы хотел сделать это одним запросом. Так что я могу сделать:

import('translations/en').then(() => ...

И это должно потребовать их всех. Мне удалось написать сценарий, который создает один файл для каждой из поддерживаемых нами локалей, который содержит эти 3 импорта, но веб-пакет все равно разделил бы его на несколько асинхронных блоков. Можно ли как-то объединить их для локали ?

Спасибо!

Answer 1

Используйте webpackChunkName подсказку, чтобы поместить несколько импортов в один блок

import(/* webpackChunkName: "translations/en" */ 'translations/en').then(() => ...
import(/* webpackChunkName: "translations/en" */ 'moment/locales/en').then(() => ...
import(/* webpackChunkName: "translations/en" */ 'other/en').then(() => ...

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

Если это не поможет, взгляните на SplitChunksPlugin документацию.