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 = import.meta.glob('./components/**/config.vue', { @@ -26,6 +26,16 @@ export let packagesList: PackagesType = { [PackagesCategoryEnum.ICONS]: IconList } +// 组件缓存, 可以大幅度提升组件加载速度 +const componentCacheMap = new Map() +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) } }