From 50e9e994b1ce462ac162bcc742e85c98cff535d0 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)
}
}