From 51ba52ae45f39a776cf5b8c9c80050c0a25d7aef Mon Sep 17 00:00:00 2001
From: ly-chn <3293232930@qq.com>
Date: Thu, 17 Aug 2023 09:38:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=8C=E6=AD=A5=E6=97=B6=E5=87=BA?=
 =?UTF-8?q?=E7=8E=B0=E7=89=B9=E6=AE=8Akey=E6=97=B6,=20=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E5=A7=8B=E7=BB=88=E6=98=BE=E7=A4=BA,=20?=
 =?UTF-8?q?=E4=B8=94=E6=97=A0=E6=B3=95=E7=BB=A7=E7=BB=AD=E8=A7=A3=E6=9E=90?=
 =?UTF-8?q?=E5=90=8E=E7=BB=AD=E5=86=85=E5=AE=B9=20perf:=20=E5=A4=A7?=
 =?UTF-8?q?=E9=87=8F=E4=BD=BF=E7=94=A8=E7=9B=B8=E5=90=8C=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=97=B6,=20=E6=8F=90=E5=8D=87createComponent=E6=80=A7?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                            |  2 ++
 src/packages/index.ts                 | 35 ++++++++++++++++++---------
 src/views/chart/hooks/useSync.hook.ts |  4 +--
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/.gitignore b/.gitignore
index 60a4aff1..e0f420b7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,6 @@ node_modules
 dist
 dist-ssr
 *.local
+pnpm-lock.yaml
 .vscode
+.idea
diff --git a/src/packages/index.ts b/src/packages/index.ts
index 20bc8535..5653bd23 100644
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@@ -1,9 +1,9 @@
-import { ChartList } from '@/packages/components/Charts/index'
-import { DecorateList } from '@/packages/components/Decorates/index'
-import { InformationList } from '@/packages/components/Informations/index'
-import { TableList } from '@/packages/components/Tables/index'
-import { PhotoList } from '@/packages/components/Photos/index'
-import { IconList } from '@/packages/components/Icons/index'
+import {ChartList} from '@/packages/components/Charts/index'
+import {DecorateList} from '@/packages/components/Decorates/index'
+import {InformationList} from '@/packages/components/Informations/index'
+import {TableList} from '@/packages/components/Tables/index'
+import {PhotoList} from '@/packages/components/Photos/index'
+import {IconList} from '@/packages/components/Icons/index'
 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
 
 const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
@@ -26,6 +26,16 @@ export let packagesList: PackagesType = {
   [PackagesCategoryEnum.ICONS]: IconList
 }
 
+// 组件缓存, 可以大幅度提升组件加载速度
+const componentCacheMap = new Map<string, any>()
+const loadConfig = (packageName: string, categoryName: string, keyName: string) => {
+  const key = packageName + categoryName + keyName
+  if (!componentCacheMap.has(key)) {
+    componentCacheMap.set(key, import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`))
+  }
+  return componentCacheMap.get(key)
+}
+
 /**
  * * 获取目标组件配置信息
  * @param targetData
@@ -35,10 +45,10 @@ export const createComponent = async (targetData: ConfigType) => {
   // redirectComponent 是给图片组件库和图标组件库使用的
   if (redirectComponent) {
     const [packageName, categoryName, keyName] = redirectComponent.split('/')
-    const redirectChart = await import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`)
+    const redirectChart = await loadConfig(packageName, categoryName, keyName)
     return new redirectChart.default()
   }
-  const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
+  const chart = await loadConfig(targetData.package, category, key)
   return new chart.default()
 }
 
@@ -62,7 +72,7 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
  * @param {ConfigType} dropData 配置项
  */
 export const fetchChartComponent = (dropData: ConfigType) => {
-  const { key } = dropData
+  const {key} = dropData
   return fetchComponent(key, FetchComFlagType.VIEW)?.default
 }
 
@@ -71,7 +81,7 @@ export const fetchChartComponent = (dropData: ConfigType) => {
  * @param {ConfigType} dropData 配置项
  */
 export const fetchConfigComponent = (dropData: ConfigType) => {
-  const { key } = dropData
+  const {key} = dropData
   return fetchComponent(key, FetchComFlagType.CONFIG)?.default
 }
 
@@ -84,7 +94,10 @@ export const fetchImages = async (targetData?: ConfigType) => {
   // 正则判断图片是否为 url，是则直接返回该 url
   if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image
   // 新数据动态处理
-  const { image, package: targetDataPackage } = targetData
+  const {
+    image,
+    package: targetDataPackage
+  } = targetData
   // 兼容旧数据
   if (image.includes('@') || image.includes('base64')) return image
 
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
index b97fd4e5..0d27fc99 100644
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -196,9 +196,7 @@ export const useSync = () => {
             chartHistoryStore.clearForwardStack()
           }
         }
-      } else {
-        // 非组件(顺便排除脏数据)
-        if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
+      } else if (key === ChartEditStoreEnum.EDIT_CANVAS_CONFIG || key === ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG) {
         componentMerge(chartEditStore[key], projectData[key], true)
       }
     }