Как работает динамический импорт в веб-пакете при использовании с выражением?

Итак, я наткнулся на этот вопрос, который дал мне представление о том, как это работает и что искать. Я размещаю здесь сообщение, чтобы он мог помочь кому-то другому.
Ключевым моментом здесь является использование Волшебных комментариев. Из документации:

Встроенные комментарии для работы функций. Добавляя комментарии к импорту, мы можем делать такие вещи, как давать имя нашему блоку или выбирать разные режимы.

webpackMode
Он расскажет, как веб-пакет должен объединять ваши ресурсы. Вы отмечаете свой импорт как таковой: import(/* webpackMode: "lazy" */`./locales/${language}.json`)

• 'lazy' (по умолчанию): создает фрагмент с отложенной загрузкой для каждого модуля import () ed.
• «lazy-once»: генерирует один фрагмент с отложенной загрузкой, который может удовлетворить все вызовы import (). Фрагмент будет получен при первом вызове import (), а последующие вызовы import () будут использовать тот же сетевой ответ. Обратите внимание, что это имеет смысл только в случае частично динамического оператора, например import (./locales/${language}.json), где потенциально может быть запрошено несколько путей к модулям.
• нетерпеливо: не создает лишних фрагментов. Все модули включены в текущий блок, и никаких дополнительных сетевых запросов не делается. Обещание все еще возвращается, но уже разрешено. В отличие от статического импорта, модуль не выполняется до тех пор, пока не будет выполнен вызов import ().
• «weak»: пытается загрузить модуль, если функция модуля уже была загружена другим способом (например, ее импортировал другой фрагмент или был загружен скрипт, содержащий модуль). Обещание по-прежнему возвращается, но успешно разрешается только в том случае, если фрагменты уже находятся на клиенте. Если модуль недоступен, обещание отклоняется. Сетевой запрос никогда не будет выполнен. Это полезно для универсального рендеринга, когда необходимые фрагменты всегда обслуживаются вручную в начальных запросах (встроены в страницу), но не в тех случаях, когда навигация по приложению запускает импорт, который изначально не обслуживается.

Вы также можете использовать комбинации с другими магическими комментариями, такими как:

• /* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data", webpackPrefetch: true */,
  • will bundle all the possible assets in one bundle, name it as all-i18n-data and will instruct the browser to prefetch in idle time after the parent module is loaded
• /* webpackMode: "lazy", webpackChunkName: "[request]", webpackPreload: true */,
  • will bundle all the possible assets in separate bundles, name them as as the string of your request and request it as the parent module is requested.

Я надеюсь, что это помогает! Для чего-то более подробного:

1. упомянутый выше вопрос о переполнении стека
2. https://github.com/webpack/webpack/issues/4807
3. документация по динамическому импорту и волшебным комментариям
4. разделение кода, предварительная выборка и предварительная загрузка