🌍 Привет мир! 👋

🌍 Привет мир! 👋

Поговорим про Dynamic imports, не частый кейс по использованию, но стоит отметить важность знания использования такой возможности, что позволит в удобном моменте задействовать.

🚀 Мотивация

Каждый день мы сталкиваемся со стандартным способом импорта файлов, он же статичный (static import).
Однако есть случаи в которых динамический импорт будет очень полезен:

📌 Сокращение времени первоначальной загрузки. Из-за роста приложения синхронная загрузка (static import) может привести к более медленной начальной загрузке страниц из-за более крупных пакетов (bundles) JavaScript.

📌 Загрузка только необходимого контента. Есть файлы которые при определенных бизнес сценариях абсолютно не нужны текущему пользователю, так как будет отсутствовать необходимость в использовании некоторого функционала.

📌 Сохранение обратной совместимости. Недавно я писал про NPM package aliases, так вот динамический импорт это продолжение темы про сохранение обратной совместимости, когда наличие двух одинаковых пакетов, но с разными версиями. Динамический импорт позволит вызывать определенный файл исходя из переменных окружения или готовности кодовой базы.

⚙️ Процесс использования динамического импорта

Импорт вызывается с помощью keyword import() , который возвращает promise, и хотя визуально это очень похоже на функцию, на самом деле это функционально-подобное выражение. В качестве первого параметра, а как правило используется только первый, выступает путь к файлу.

📝 Набросал небольшой пример:

export const log = () => {
  console.log("Опционально загружен")
}

const contactBtn = document.querySelector('#button');

contactBtn.addEventListener('click', () => {
  import('./optionalModule.js').then(module => module.log());
});

Из примера видно, что после вызова then ( так необходимо, потому что импорт возвращает promise ), получаем модуль и вызываем экспортируемый из модуля метод log.

👇 Полезные советы 👇

1️⃣ Static import так не умеет, будет ошибка:

contactBtn.addEventListener('click', () => {
  import { log } from "./optionalModule.js";
  console.log(log())
});

2️⃣ Не забывайте что существуют default exports:

export default log = () => {
  console.log("Опционально загружен")
}

contactBtn.addEventListener('click', () => {
  import('./optionalModule.js').then(module => module.default());
});

3️⃣ Не забывайте обрабатывать ошибки, по каким-либо причинам динамический импорт может завершиться с ошибкой.

4️⃣ Используйте динамический импорт только при необходимости. Обычный импорт предпочтительнее для загрузки исходных зависимостей, так как будет больше преимуществ от инструментов статического анализа и tree shaking.

5️⃣ Для любителей React напоминалка, что динамический импорт является основой “ленивой загрузки” Lazy, про который поговорим в одной из следующих статей.

💬 Делитесь своим мнением в комментариях👇! Если вам понравилась статья, не забудьте поставить лайк! 👍

#JAVASCRIPT #PERFORMANCE