Question

我们有一个新的基于Lit-element的项目，我们正在考虑使诸如动态导入之类的某些事情自动化。我们已经通过实现两个主要部分来做到这一点：

观察者脚本检查（在本地提供服务时）对ui组件的更改，并将包含对象的包含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;
};

关于变异观察者使动态导入自动化的效率/可靠性的观点

0 个答案: