4

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

  • 一个观察者脚本检查对 ui 组件的更改（在本地服务时）并将其写入新文件component-tag: () => import('path')
  • 一个标签检查器，它在所有组件阴影 DOM 中添加一个突变观察，以观察是否添加了新标签并动态（如果尚未）导入其类定义（从观察者脚本生成的对象中获取）

现在主要的问题是：

  1. 你觉得这个功能怎么样？
  2. 这会有多高的效率？（现在app很小，性能还不错）
  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;
};
4

0 回答 0