Мнения об эффективности / надежности наблюдателя мутаций для автоматизации динамического импорта
У нас есть новый проект на основе Lit-элементов, и мы думаем об автоматизации некоторых вещей, таких как динамический импорт. Мы уже сделали это, реализовав две основные части:
- скрипт-наблюдатель проверяет изменения (при локальном обслуживании) компонентов пользовательского интерфейса и записывает в новый файл экспорт с объектом, содержащим пары ключ-значение
component-tag: () => import('path')
- средство проверки тегов, добавляющее наблюдение за мутациями во всех компонентах теневых DOM, чтобы наблюдать, был ли добавлен новый тег, и динамически (если еще не импортировать) его определение класса (беря его из объекта, сгенерированного сценарием наблюдателя)
Теперь основные вопросы:
- Что вы думаете об этой функции?
- Насколько эффективно это будет? (Теперь приложение очень маленькое и имеет хорошую производительность)
- Если подумать о многих изменениях DOM, производительность снизится. Как это предотвратить? Хорошая фильтрация может быть?
- Кто-нибудь пробовал этот подход? На производстве?
Спасибо
// generated file
export default {
"tag-elem-one": () => import("/src/components/tag-elem-one.js"),
"tag-elem-two": () => import("/src/components/tag-elem-two.js"),
};
// Checker
////////////////////
const attachShadow = HTMLElement.prototype.attachShadow
HTMLElement.prototype.attachShadow = function (option) {
const sh = attachShadow.call(this, option);
this.mutationObserver = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
if (mutation.addedNodes.length) {
mutation.addedNodes.forEach(addedNode => {
if (addedNode.nodeName.includes('-')) {
const tag = addedNode.nodeName.toLowerCase();
importTag(tag)
}
importTagsInNodeChildren(addedNode)
})
}
})
});
this.mutationObserver.observe(this.shadowRoot, {
childList: true,
subtree: true
});
return sh;
};