Перейти к содержимому
JS/TS Interview Tutorial

Dynamic import()

import() — выражение (не function call), возвращающее Promise<ModuleNamespace>; это ключевой инструмент code splitting и lazy loading, работающий и в ESM, и в CJS, с кэшированием по URL.

// import() возвращает Promise&lt;ModuleNamespace&gt;
// Работает в ESM (.mjs) и в CJS (require-файлах) — Node.js 12+
const { default: lodash, chunk } = await import('lodash');
console.log(chunk([1,2,3,4,5], 2)); // [[1,2],[3,4],[5]]


// Code splitting — webpack/Rollup/Vite создадут отдельный chunk
async function loadHeavyFeature() {
  const { HeavyComponent } = await import('./HeavyComponent.js');
  return HeavyComponent;
}


// React.lazy для route-level code splitting
const AdminPage = React.lazy(() =&gt; import('./AdminPage.jsx'));
// Vite автоматически создаёт admin-[hash].chunk.js
// Условная загрузка polyfill
const intersection = await (
  'IntersectionObserver' in window
    ? Promise.resolve({ default: class {} }) // no-op
    : import('intersection-observer')
);


// Динамический путь (осторожно: bundler включит ВСЕ совпадения)
const locale = getUserLocale(); // 'en' | 'ru' | 'de'
const messages = await import(`./locales/${locale}.js`);
// Bundler создаст chunk для КАЖДОГО файла locales/*.js


// Prefetch для ускорения последующего import():
const link = document.createElement('link');
link.rel  = 'modulepreload';
link.href = '/heavy-feature.js';
document.head.appendChild(link); // прогрузить до клика пользователя
// Потом: await import('/heavy-feature.js') → из кэша
// Кэширование: import() кэширует по URL (как require)
const p1 = import('./module.js');
const p2 = import('./module.js');
console.log(p1 === p2); // true — один Promise из кэша


// import() в CJS файлах — способ загрузить ESM без рефакторинга
// legacy.cjs:
async function useModernLib() {
  const { fn } = await import('./modern-lib.mjs');
  return fn();
}


// Принудительная перезагрузка модуля (hack):
// const fresh = await import(`./module.js?v=${Date.now()}`);
// ОСТОРОЖНО: разный URL = новый модуль в кэше = memory leak!
// Используйте только в devtools / hot reload сценариях

Итог: import() — выражение, возвращающее Promise<ModuleNamespace>; кэшируется по URL, работает в ESM и CJS, является основой code splitting в современных bundler-ах.