Если вы читаете эту статью, то, скорее всего, знаете об импорте статических модулей.
Приведенный выше код позволяет разделить ваш JavaScript на несколько файлов и импортировать их только при необходимости. Проблема, однако, в том, что этот код всегда загружается браузером немедленно, что потенциально может привести к медленной загрузке страницы. Именно здесь вступает в действие импорт динамических модулей.
Как использовать динамический импорт модулей?
Импорт динамического модуля очень похож на импорт статического модуля, но код загружается только тогда, когда это необходимо, а не сразу. Это означает, что скорость загрузки вашей страницы будет намного выше, и пользователь будет загружать только тот код JavaScript, который он действительно собирается использовать.
Вот простой пример того, как загрузить указанный выше модуль с помощью динамического импорта модулей.
Как вы можете видеть, этот код очень похож на использование обычного импорта, но вместо этого этот импорт представляет собой функцию, которая возвращает промис. Это обещание содержит все детали модуля.
Однако вы заметите, что экспорт модуля по умолчанию фактически должен быть деструктурирован по сравнению с возвращаемым значением обещания. Вот почему у нас есть код default: User, который сопоставляет экспорт по умолчанию с пользовательской переменной.
Вы также можете использовать async/await, чтобы очистить это еще больше.
Этот код работает так же, как и версия на основе промисов, но, на мой взгляд, он немного чище и с ним проще работать.
