Как будет работать динамический импорт после сборки без использования сборщика?

1.8 Middle🔥 171 комментариев

#JavaScript Core

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как будет работать динамический импорт после сборки без использования сборщика?

Отличный вопрос про динамический импорт и как он работает в разных средах. Разберём подробно.

Что такое динамический импорт

// Статический импорт (загружается сразу)
import { Component } from './Component';

// Динамический импорт (загружается по требованию)
const module = await import('./Component');

Динамический импорт в браузере (без сборщика)

В современных браузерах динамический импорт работает напрямую без сборщика:

<!-- index.html -->
<script type="module">
  // Это работает в браузере БЕЗ Webpack/Vite/Parcel
  const module = await import('./module.js');
  console.log(module);
</script>

// module.js
export const greeting = 'Hello';
export function sayHi() {
  console.log('Hi!');
}

Что происходит:

Браузер видит import('./module.js')
Загружает файл module.js через HTTP запрос
Парсит его как ES модуль
Возвращает Promise с модулем
Код выполняется асинхронно

Пример в браузере

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Import</title>
</head>
<body>
  <button id="btn">Load Module</button>
  <div id="result"></div>
  
  <script type="module">
    const btn = document.getElementById('btn');
    const result = document.getElementById('result');
    
    btn.addEventListener('click', async () => {
      try {
        // Динамически загружаем модуль
        const module = await import('./hello.js');
        
        // Используем экспорты
        result.textContent = module.greeting;
        module.sayHi();
      } catch (error) {
        result.textContent = 'Ошибка загрузки';
      }
    });
  </script>
</body>
</html>

// hello.js
export const greeting = 'Hello from dynamic import!';

export function sayHi() {
  console.log('Module loaded dynamically');
}

Как это работает в браузере:

Страница загружается, кнопка показывается
hello.js НЕ загружается
Клик по кнопке -> вызывается import('./hello.js')
Браузер отправляет GET запрос на hello.js
Модуль загружается и выполняется
Promise resolve с модулем
Код использует экспорты

Динамический импорт с Webpack/Vite/Parcel

Сборщик вмешивается в процесс.

Webpack

// Исходный код
const module = await import('./heavy.js');

// После сборки Webpack преобразует в:
const module = await __webpack_require__.e("src_heavy_js")
  .then(__webpack_require__.bind(null, "./src/heavy.js"));

Что делает Webpack:

Code Splitting — выделяет динамический импорт в отдельный chunk
Lazy Loading — создаёт отдельный bundle файл
Добавляет logic — код загрузки chunk'а через JSONP или другие методы
Преобразует Promise — вместо нативного импорта используется Webpack логика

На диске:

dist/
├── main.js              (основной bundle)
├── src_heavy_js.bundle.js   (отдельный chunk для динамического импорта)
└── manifest.js          (информация о chunks)

В браузере при загрузке:

1. Загружается main.js
2. При клике на импорт, Webpack загружает src_heavy_js.bundle.js
3. После загрузки merge'ит модули и execute

Vite

// Исходный код
const module = await import('./heavy.js');

// Vite оставляет более близким к нативному:
const module = await import('./heavy.js?import');

Vite использует нативный динамический импорт браузера, только преобразует пути для работы с его модулем-system.

Проблема: запросы и CORS

Динамический импорт отправляет HTTP запрос. Это имеет следствия:

CORS ошибки

// В браузере на https://example.com
const module = await import('https://other-domain.com/module.js');
// CORS error! if other-domain не позволил cross-origin

Решение: сервер должен иметь CORS заголовки

// На сервере other-domain.com
res.setHeader('Access-Control-Allow-Origin', '*');

Content-Type

// Ошибка: модуль должен иметь Content-Type: application/javascript
const module = await import('/data.json');
// Failed: expected javascript, got application/json

Как браузер кеширует динамические импорты

Bраузер использует HTTP кеш и модульный кеш.

// Первый импорт — загружает с сервера
const mod1 = await import('./module.js');

// Второй импорт — из браузерного кеша модулей!
const mod2 = await import('./module.js');

// mod1 === mod2 (тот же объект модуля)
console.log(mod1 === mod2);  // true

Оптимизация: браузер запомнил модуль, не загружает второй раз.

Практический пример: Ленивая загрузка страниц

// app.js (без сборщика, чистый браузер)
class Router {
  constructor() {
    this.routes = {};
  }
  
  registerRoute(path, moduleUrl) {
    this.routes[path] = moduleUrl;
  }
  
  async navigate(path) {
    if (!this.routes[path]) {
      console.error('Route not found');
      return;
    }
    
    // Динамически загружаем модуль
    const module = await import(this.routes[path]);
    
    // Инициализируем страницу
    module.init();
  }
}

const router = new Router();
router.registerRoute('/home', './pages/home.js');
router.registerRoute('/about', './pages/about.js');
router.registerRoute('/contact', './pages/contact.js');

// При клике на ссылку
document.addEventListener('click', async (e) => {
  if (e.target.tagName === 'A') {
    const path = e.target.getAttribute('href');
    await router.navigate(path);
  }
});

// pages/home.js
export function init() {
  document.body.innerHTML = '<h1>Home Page</h1>';
}

// pages/about.js
export function init() {
  document.body.innerHTML = '<h1>About Page</h1>';
}

Проблема: Абсолютные пути

Динамический импорт работает с относительными путями.

// Работает: относительный путь
await import('./module.js');
await import('../sibling.js');

// НЕ работает: абсолютный путь (без сборщика)
await import('/module.js');  // Ошибка в браузере

// Решение: использовать относительные пути
await import('./components/module.js');

С Webpack это работает потому что сборщик преобразует пути:

// Исходный код
await import('/module.js');

// После Webpack
await import('/dist/module.js');  // переписано

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

try {
  const module = await import('./heavy.js');
  console.log('Module loaded:', module);
} catch (error) {
  // Модуль не найден, CORS ошибка, синтаксическая ошибка
  console.error('Failed to load module:', error);
}

Типичные ошибки:

1. Failed to fetch dynamically imported module (сетевая ошибка)
2. Unexpected token (синтаксическая ошибка в модуле)
3. CORS policy (модуль с другого домена)
4. Content-Type (неправильный тип)

Типизация в TypeScript

// Динамический импорт с типами
interface Module {
  init: () => void;
  config: { name: string };
}

const module: Module = await import('./module.js');
module.init();
console.log(module.config.name);

Производительность: динамический vs статический импорт

// Статический импорт
import { heavyComponent } from './heavy.js';
// Загружается сразу при загрузке страницы

// Динамический импорт
const heavyComponent = await import('./heavy.js');
// Загружается только когда нужно

Преимущества динамического:

Начальная загрузка быстрее (не загружаем всё сразу)
Экономим трафик (модули, которые не используются, не загружаются)
Лучше для мобильных

Заключение

Динамический импорт без сборщика:

В браузере работает нативно — import() преобразуется браузером в загрузку модуля
Отправляет HTTP запрос — браузер скачивает файл как ES модуль
Возвращает Promise — асинхронная загрузка
Кешируется — повторные импорты из кеша модулей
Требует типа модуля — <script type="module"> в HTML
CORS ограничения — работает только если разрешены cross-origin
Сборщик оптимизирует — Webpack/Vite делают code splitting и оптимизируют загрузку

Это мощный инструмент для оптимизации загрузки и улучшения производительности приложений.