Динамический импорт в 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

Автор: gee_danko

Источник