Мнения об эффективности / надежности наблюдателя мутаций для автоматизации динамического импорта - PullRequest
0 голосов
/ 06 февраля 2019

У нас есть новый проект на основе Lit-элементов, и мы думаем об автоматизации некоторых вещей, таких как динамический импорт.Мы уже сделали это, реализовав две основные части:

  • скрипт-наблюдатель, проверяющий изменения (при локальном обслуживании) компонентов пользовательского интерфейса и записывающий в новый файл экспорт с объектом, содержащим пары ключ-значение component-tag: () => import('path')
  • средство проверки тегов, которое добавляет мутацию, наблюдая во всех компонентах теневых DOM, чтобы наблюдать, был ли добавлен новый тег, и динамически импортировать (если еще нет) определение его класса (беря его из объекта, сгенерированного наблюдателем).сценарий)

Теперь основными вопросами являются:

  1. Что вы думаете об этой функции?
  2. Насколько это будет эффективно?(Теперь приложение очень маленькое и имеет хорошую производительность)
  3. Если подумать о многих изменениях DOM, производительность снизится.Как это предотвратить?Хорошая фильтрация может быть?
  4. Кто-нибудь пробовал этот подход?На производстве?

Спасибо

// 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;
};
...