Динамический импорт модулей в браузере (ES Modules)!

Браузеры давно поддерживают загрузку модулей в рантайме через import(). Это позволяет не грузить весь JS сразу: ленивые фичи, плагины, тяжёлые виджеты, админ-разделы SPA — всё подгружается по запросу и кэшируется как обычный ESM-модуль.

Базовый import в консоли:
import("/path/to/module.js")
.then(m => console.log("Модуль загружен:", m))
.catch(e => console.error("Ошибка загрузки:", e));

Импорт и сразу использование экспорта:
import("/path/to/math.js")
.then(({ sum }) => console.log("Sum:", sum(2, 3)))
.catch(console.error);

Ленивая загрузка по клику на конкретный элемент UI:
document.querySelector("#confettiBtn")?.addEventListener("click", () => {
import("/path/to/confetti.js")
.then(m => m.run())
.catch(console.error);
});

Простая (приблизительная) проверка поддержки динамического import:
const supportsDynamicImport = (() => {
try { new Function("import('data:text/javascript,')"); return true; }
catch { return false; }
})();
console.log("Dynamic import support:", supportsDynamicImport);

Важно: import() асинхронный, UI не блокируется; ошибки обрабатываются в .catch(), модуль кэшируется браузером.

Короткий пример с обработкой ошибок:
import("/path/to/user-profile.js")
.then(m => m.init())
.catch(e => console.error("Ошибка загрузки модуля:", e));

Динамический импорт — простой способ держать код чистым, архитектуру ленивой, а старт страницы быстрым, используя стандартный JavaScript и нативный ESM.

Code Ready | #практика