perf: 优化 CompConsumer 代码

src/layouts/components/AppMain.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { useTagsViewStore } from "@/store/modules/tags-view"
+// import { CompConsumer } from "./CompConsumer"
+
 const tagsViewStore = useTagsViewStore()
 </script>
 
@@ -12,6 +14,7 @@ const tagsViewStore = useTagsViewStore()
           <keep-alive :include="tagsViewStore.cachedViews">
             <component :is="Component" :key="route.path" />
           </keep-alive>
+          <!-- <CompConsumer :component="Component" /> -->
         </transition>
       </router-view>
     </div>

src/layouts/components/CompConsumer/index.ts

@@ -1,34 +1,33 @@
-import { useTagsViewStore } from "@/store/modules/tags-view"
+import { type VNode, cloneVNode, createVNode, defineComponent, h, KeepAlive } from "vue"
-import type { VNode } from "vue"
-import { h } from "vue"
-import { KeepAlive, cloneVNode, createVNode, defineComponent } from "vue"
 import { useRoute } from "vue-router"
+import { useTagsViewStore } from "@/store/modules/tags-view"
+
 interface CompConsumerProps {
-  component?: VNode
+  component: VNode
 }
+
 const compMap = new Map<string, VNode>()
+
 export const CompConsumer = defineComponent(
   (props: CompConsumerProps) => {
     const tagsViewStore = useTagsViewStore()
     const route = useRoute()
     return () => {
       const component = props.component
-      // 判断当前是否包含name，如果不包含name，那就直接处理掉name
+      // 判断当前是否包含 name，如果不包含name，那就直接处理掉 name
       if (!route.name) return component
-      // 获取当前组件的name
+      // 获取当前组件的 name
-      const compName = (component?.type as any)?.name
+      const compName = (component.type as any)?.name
       const routeName = route.name as string
       let Comp: VNode
       if (compMap.has(routeName)) {
-        // @ts-expect-error this is Node
+        Comp = compMap.get(routeName)!
-        Comp = compMap.get(routeName)
       } else {
-        const node = cloneVNode(component!)
+        const node = cloneVNode(component)
-        if (compName && compName === routeName)
+        if (compName && compName === routeName) {
-          // @ts-expect-error this is obj
+          ;(node.type as any).name = `__${compName}__CUSTOM_NAME`
-          node.type.name = `__${compName}__` + "CUSTOM_NAME"
+        }
         // @ts-expect-error this is VNode
-        // eslint-disable-next-line vue/one-component-per-file
         Comp = defineComponent({
           name: routeName,
           setup() {
@@ -47,7 +46,6 @@ export const CompConsumer = defineComponent(
         }
       )
     }
-    // eslint-disable-next-line vue/one-component-per-file
   },
   {
     name: "CompConsumer",