Предложенная на TC39, функция импорта наконец-то доступна в большинстве браузеров. Хотя эта функция не упрощает повседневную жизнь разработчика, она позволяет использовать некоторые интересные решения. В этой короткой статье я хочу выделить конкретный вариант использования динамического импорта.

Вы можете пропустить эту статью, если вам нужна поддержка Internet Explorer.

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

MDN советует использовать динамический импорт только при необходимости. Модули для поддержки дополнительных функций, которые могут не требоваться для запуска приложения, подходят для динамического импорта.

Мы создаем библиотеку информации о местоположении (MAPP). Openlayers - это основной интерфейс приложения для пространственных данных, который требуется при инициализации для представления данных в виде элемента управления картой.

Данные о местоположении также могут быть представлены в виде диаграммы или таблицы. Для этого нам потребуются дополнительные библиотеки, такие как Chart.js или Tabulator. Чтобы сохранить пакет MAPP компактным, мы предпочитаем не объединять дополнительные библиотеки размером ~ 5 КБ. Chart.js и Tabulator могут быть предоставлены как теги скрипта в представлениях нашего приложения. Эти библиотеки могут вообще не потребоваться для представления приложения или могут потребоваться только на более позднем этапе. Теперь можно импортировать эти модули вовремя, когда это необходимо.

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

Мы создаем собственные небольшие модули для импорта для всех дополнительных модулей. Поскольку функция импорта возвращает обещание, наша экспортированная функция должна быть асинхронной, чтобы ее можно было ожидать для разрешения импорта.

Импортированный модуль хранится в переменной за пределами закрытия нашего экспорта и совместно используется несколькими импортами одного и того же модуля.

Если требуется null, метод dynamicImport проверит, был ли модуль уже назначен объекту окна (глобальному) через тег скрипта. Модуль, назначенный окну, будет назначен нашей переменной, если это так. В противном случае мы будем ждать функции импорта, чтобы разрешить модуль Tabulator из skypack.

Отказ от ответственности

Это довольно новый способ ведения дел. В настоящее время мы серьезно переписываем экосистему XYZ и, в частности, интерфейс MAPP. Мы планируем отказаться от Webpack в пользу Snowpack и в этом отношении пересматриваем нашу обработку или сторонние модули. Мы еще НЕ используем эту технологию в производстве и хотели бы прочитать ваши комментарии.

По всем вопросам, касающимся карт, XYZ и геолокации в целом, следите за GEOLYTIX на всех каналах.