HTML Academy · Урок

Динамический import() в модулях

Загружайте модули по требованию с помощью динамического import()

«Динамический import() в модулях» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Выражение import()

В отличие от статического объявления import, import("./module.js") — это выражение, возвращающее Promise, который разрешается в пространство имён модуля. Оно работает где угодно: внутри функций, условий и даже обычных скриптов, не являющихся модулями.

Разделение кода

Динамический импорт — основной механизм разделения кода. Обработчик маршрута может отложить загрузку кода маршрута до перехода пользователя: const mod = await import("./routes/admin.js"). Байты маршрута не загружаются, пока не понадобятся.

document.getElementById("settings-btn").addEventListener("click", async () => {
  const { renderSettings } = await import("./settings.js");
  renderSettings();
});

Возвращаемое пространство имён модуля

Разрешённое значение — это пространство имён модуля, то есть объект, свойствами которого являются экспорты модуля. Именованные экспорты можно деструктурировать непосредственно в выражении, а экспорт по умолчанию получать через module.default.

Обработка ошибок

Поскольку import() возвращает обещание, ошибки неудачной загрузки или синтаксические ошибки передаются в .catch(). Оборачивайте динамические импорты в try/catch (в асинхронных функциях) или используйте .catch(), чтобы корректно обрабатывать сбои сети.

try {
  const mod = await import("./optional.js");
  mod.run();
} catch (e) {
  console.warn("Optional module failed", e);
}

Условная загрузка

Загружайте полифилы только в старых браузерах: if (!window.IntersectionObserver) await import("intersection-observer-polyfill"). Современные браузеры полностью пропускают эти байты, а старые платят за загрузку только при необходимости.

Разрешение спецификаторов

Для спецификатора действуют те же правила, что и для статического импорта: относительные URL, абсолютные URL или короткие имена, сопоставленные через карту импорта. Можно использовать и динамические строки: import(`./locales/${lang}.js`), хотя сборщикам бывает сложно разделять такой код.

Кэширование

Каждый уникальный спецификатор разрешается в один и тот же экземпляр модуля. Второй вызов import("./mod.js") возвращает уже загруженный модуль без повторного сетевого запроса, поэтому динамический импорт безопасно использовать в обработчиках событий, не опасаясь повторных загрузок.

Динамический импорт на верхнем уровне

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

// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();

Использование с React.lazy и Preact

React.lazy, `lazy` из Preact/compat и defineAsyncComponent из Vue оборачивают динамический импорт для разделения кода на уровне компонентов. Примитив браузера — import(); фреймворки дополняют его границами загрузки, похожими на suspense.

Разделение кода в Webpack и Vite

Сборщики видят в исходном коде import("...") и создают отдельный фрагмент для импортированного модуля. Заглушка среды выполнения загружает этот фрагмент при первом вызове. Автор пишет import() согласно спецификации ES, а сборщик организует сетевое взаимодействие.

Распространённая ошибка

Вызов import("X") на часто выполняемом участке (например, внутри цикла отрисовки) проверяет кэш при каждом вызове. Повторной загрузки не происходит, но поиск требует дополнительных ресурсов. После первого импорта сохраните разрешённое пространство имён в переменной.

Проверка знаний

Что возвращает import("./mod.js")?

Итоги

Динамический импорт() — это вариант статического объявления import, выполняемый по требованию. Он возвращает Promise, разрешающийся в пространство имён модуля, и позволяет разделять код, условно загружать полифилы и создавать системы плагинов. После первого импорта модули кэшируются, поэтому последующие вызовы не требуют загрузки. Сборщики создают отдельные фрагменты для каждого вызова динамического импорта.

Часто задаваемые вопросы

Урок «Динамический import() в модулях» бесплатный?

Да — полный текст урока «Динамический import() в модулях» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Динамический import() в модулях»?

Загружайте модули по требованию с помощью динамического import() Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Динамический import() в модулях»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy