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

Question

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

То, чего я хочу достичь, это следующий сценарий:

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

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

Моя настоящая проблема

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

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

Answer 1

Если у вас есть отображение из панели мониторинга в модуль, который его реализует, то вы можете просто динамически 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...
};