fix: 同步时出现特殊key时, 加载进度始终显示, 且无法继续解析后续内容

perf: 大量使用相同组件时, 提升createComponent性能

.gitignore

@@ -3,4 +3,6 @@ node_modules
 dist
 dist-ssr
 *.local
+pnpm-lock.yaml
 .vscode
+.idea

src/packages/index.ts

@@ -1,9 +1,9 @@
-import { ChartList } from '@/packages/components/Charts/index'
+import {ChartList} from '@/packages/components/Charts/index'
-import { DecorateList } from '@/packages/components/Decorates/index'
+import {DecorateList} from '@/packages/components/Decorates/index'
-import { InformationList } from '@/packages/components/Informations/index'
+import {InformationList} from '@/packages/components/Informations/index'
-import { TableList } from '@/packages/components/Tables/index'
+import {TableList} from '@/packages/components/Tables/index'
-import { PhotoList } from '@/packages/components/Photos/index'
+import {PhotoList} from '@/packages/components/Photos/index'
-import { IconList } from '@/packages/components/Icons/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
 

src/views/chart/hooks/useSync.hook.ts

@@ -196,9 +196,7 @@ export const useSync = () => {
             chartHistoryStore.clearForwardStack()
           }
         }
-      } else {
+      } else if (key === ChartEditStoreEnum.EDIT_CANVAS_CONFIG || key === ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG) {
-        // 非组件(顺便排除脏数据)
-        if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
         componentMerge(chartEditStore[key], projectData[key], true)
       }
     }