У нас есть новый проект на основе 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;
};