[Из песочницы] Динамический импорт в JavaScript
В начале прошлого года было предложено ввести в JavaScript возможность динамического импорта. Если кто не знает, то сейчас в JavaScript нативно поддерживается только статическая импортизация и для этого есть причины, но это тема отдельного разговора. Предложение было реализовано и включено в список ближайшего обновления ECMAScript. Google Chrome с 63 версии уже поддерживает эту возможность. Я немного расскажу что это такое и где это может пригодиться.
Динамический импорт (dynamic import) используется почти также как и статический, но имеет несколько ключевых отличий:
Синтаксически динамический импорт подобен вызову функции: import («path/to/module.js»);
Команда import («path/to/file.js») возвращает Promise, который перейдет в состояние fulfilled после того, как будет подтянут и установлен сам модуль непосредственно, так и все его зависимости. А это значит, что мы можем написать вот так:
import('path/to/module.js')
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});Или даже так:
const module = await import('path/to/module.js');Важное замечание: хотя динамический импорт синтаксически и выглядит как вызов функции import (), но функцией не является. Он не наследуется от Function.prototype, а это значит что его нельзя вызвать через call или apply.
Применений динамическому импорту можно найти много, require.js уже давно имеет подобную возможность и webpack, если не ошибаюсь тоже, поэтому многие из вас, наверное, уже давно используют подобный функционал. Теперь это делать можно будет нативно. Но с другой стороны, возможность импортировать динамически, в зависимости от условий, во время рантайма дает и место для более запутанного кода, хотя понимаю что налепить плохой код можно с чем угодно, не в инструменте дело. Пишите ваше мнение в комментарии, что вы думаете о dynamic import.
Более детально можно почитать и посмотреть тут:
https://github.com/tc39/proposal-dynamic-import
https://developers.google.com/web/updates/2017/11/dynamic-import
https://www.youtube.com/watch? v=eg8eLH52d4s&t=31s
