Как загрузить модуль javascript es6, определенный во время выполнения?

Я разрабатываю SPA, который содержит несколько информационных панелей. Каждая информационная панель представляет собой набор веб-компонентов с соблюдением макета. Эти компоненты не известны статически. Они определяются во время выполнения.

Я хочу добиться следующего сценария:

  1. Приложение запускается.
  2. Приложение выполняет XHR для получения представлений информационных панелей из службы REST.
  3. Пользователь видит сводные панели, перечисленные по имени.
  4. Пользователь нажимает на элемент панели мониторинга. (скажем приборная панель 1)
  5. Приложение определяет необходимые компоненты, необходимые для загрузки панели мониторинга 1 (веб-компоненты).
  6. Загрузите веб-компоненты и их зависимости.

Мне хорошо известно о динамической загрузке веб-компонентов, на что был дан ответ здесь

Моя актуальная проблема

как загрузить веб-компонент с его зависимостями во время выполнения без необходимости загружать дубликаты зависимостей?

Существуют ли какие-либо форматы модулей или методы, которым следует следовать при упаковке веб-компонентов?


javascript es6-modules single-page-application web-component lit-element
person Anis Tissaoui    schedule 10.07.2019    source источник
comment
Есть предложение динамического импорта, уже реализовано в некоторых браузерах, что подходит для вашего варианта использования   -  person artem    schedule 10.07.2019
comment
Веб-пакет IIRC поддерживает несколько точек входа и несколько пакетов компонентов и определяет для вас зависимости без дубликатов.   -  person Bergi    schedule 11.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

Если у вас есть маппинг из дашборда в модуль, который его реализует, то вы можете просто динамически import() нужный модуль. Модульная система JS позаботится о том, чтобы не загружать уже загруженные модули, поэтому общие зависимости, такие как lit-element, будут загружены только один раз.

Эта дедупликация работает на основе URL-адреса, поэтому вы должны убедиться, что у вас есть одна копия зависимости, установленной через npm. npm dedupe попытается дедуплицировать вашу папку node_modules/, а npm ls позволит вам увидеть дерево зависимостей.

Все современные браузеры поддерживают динамический import(), и большинство упаковщиков тоже - если аргумент является строковой константой. Это означает, что вы не можете вычислить URL-адрес модуля на основе панели мониторинга, если хотите использовать упаковщик. Вам нужно что-то вроде:

const dashboardLoaders = {
  'dash-1': () => import('./dashboards/dash-1.js'),
  'dash-2': () => import('./dashboards/dash-2.js'),
  // etc...
};
person Justin Fagnani    schedule 24.07.2019