feat: 动态注册组件，优化首页出现性能

src/main.ts

@@ -4,7 +4,6 @@ import router, { setupRouter } from '@/router'
 import i18n from '@/i18n/index'
 import { setupStore } from '@/store'
 import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins'
-import { packagesInstall } from '@/packages/index'
 import { AppProvider } from '@/components/AppProvider/index'
 import { setHtmlTheme } from '@/utils'
 
@@ -40,13 +39,14 @@ async function appInit() {
   // Store 准备就绪后处理主题色
   setHtmlTheme()
 
-  // 注册 pakage 组件
-  app.use(packagesInstall)
-
   // 语言注册
   app.use(i18n)
 
+  // 挂载到页面
   app.mount('#app', true)
+
+  // 挂载到 window
+  window['$vue'] = app
 }
 
 void appInit()

src/packages/index.ts

@@ -17,16 +17,6 @@ let packagesList: PackagesType = {
   [PackagesCategoryEnum.DECORATES]: DecorateList
 }
 
-// * 注册
-const packagesInstall = (app: App): void => {
-  for (const item in packagesList) {
-    const chartList: ConfigType[] = (packagesList as any)[item]
-    chartList.forEach((chart: ConfigType) => {
-      app.component(chart.key, chart.node)
-    })
-  }
-}
-
 /**
  * * 获取目标拖拽组件信息
  * @param dropData
@@ -38,4 +28,4 @@ const createComponent = async (dropData: ConfigType) => {
   return new chart.default()
 }
 
-export { packagesList, packagesInstall, createComponent }
+export { packagesList, createComponent }

src/utils/componets.ts

@@ -1,6 +1,15 @@
 import { defineAsyncComponent, AsyncComponentLoader } from 'vue'
 import { AsyncLoading, AsyncSkeletonLoading } from '@/components/LoadingComponent'
 
+/**
+ * * 动态注册组件
+ */
+export const componentInstall = <T> (key:string, node: T)  => {
+  if(!window['$vue'].component(key)) {
+    window['$vue'].component(key, node)
+  }
+}
+
 /**
  * * 异步加载组件
  * @param loader

src/views/chart/ContentCharts/components/ItemBox/index.vue

@@ -27,7 +27,7 @@
 
 <script setup lang="ts">
 import { AppleControlBtn } from '@/components/AppleControlBtn/index'
-import { requireFallbackImg } from '@/utils'
+import { requireFallbackImg, componentInstall } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { ConfigType } from '@/packages/index.d'
 import omit from 'lodash/omit'
@@ -41,6 +41,7 @@ defineProps({
 
 // 拖拽处理
 const handleDragStart = (e: DragEvent, item: ConfigType) => {
+  componentInstall(item.key, item.node)
   // 将配置项绑定到拖拽属性上
   e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['node', 'image'])))
 }