From 1a6e271a5ec9edebe74a35f961c5d12ed12c9cc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?cls=5F=E5=AE=81=E6=B3=A2=E6=9C=AC=E6=9C=BA?= <908705107@qq.com> Date: Tue, 9 Jun 2026 12:39:01 +0800 Subject: [PATCH] Lazy load startup element plus modules --- .../web-ele/src/adapter/component/index.ts | 60 ++++++++++++++----- web/apps/web-ele/src/api/request.ts | 13 ++-- web/apps/web-ele/src/api/stream-request.ts | 11 +++- web/apps/web-ele/src/router/access.ts | 5 +- web/apps/web-ele/src/store/auth.ts | 4 +- 5 files changed, 68 insertions(+), 25 deletions(-) diff --git a/web/apps/web-ele/src/adapter/component/index.ts b/web/apps/web-ele/src/adapter/component/index.ts index 6cb0a02..7b1b449 100644 --- a/web/apps/web-ele/src/adapter/component/index.ts +++ b/web/apps/web-ele/src/adapter/component/index.ts @@ -13,21 +13,51 @@ import { defineAsyncComponent, defineComponent, h, ref } from 'vue'; import { ApiComponent, globalShareState } from '@vben/common-ui'; import { $t } from '@vben/locales'; -import { ElButton } from 'element-plus/es/components/button/index'; -import { - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, -} from 'element-plus/es/components/checkbox/index'; -import { ElDivider } from 'element-plus/es/components/divider/index'; -import { ElInput } from 'element-plus/es/components/input/index'; -import { - ElRadio, - ElRadioButton, - ElRadioGroup, -} from 'element-plus/es/components/radio/index'; -import { ElSpace } from 'element-plus/es/components/space/index'; -import { ElSwitch } from 'element-plus/es/components/switch/index'; +const ElButton = defineAsyncComponent(() => + import('element-plus/es/components/button/index').then((res) => res.ElButton), +); +const ElCheckbox = defineAsyncComponent(() => + import('element-plus/es/components/checkbox/index').then( + (res) => res.ElCheckbox, + ), +); +const ElCheckboxButton = defineAsyncComponent(() => + import('element-plus/es/components/checkbox/index').then( + (res) => res.ElCheckboxButton, + ), +); +const ElCheckboxGroup = defineAsyncComponent(() => + import('element-plus/es/components/checkbox/index').then( + (res) => res.ElCheckboxGroup, + ), +); +const ElDivider = defineAsyncComponent(() => + import('element-plus/es/components/divider/index').then( + (res) => res.ElDivider, + ), +); +const ElInput = defineAsyncComponent(() => + import('element-plus/es/components/input/index').then((res) => res.ElInput), +); +const ElRadio = defineAsyncComponent(() => + import('element-plus/es/components/radio/index').then((res) => res.ElRadio), +); +const ElRadioButton = defineAsyncComponent(() => + import('element-plus/es/components/radio/index').then( + (res) => res.ElRadioButton, + ), +); +const ElRadioGroup = defineAsyncComponent(() => + import('element-plus/es/components/radio/index').then( + (res) => res.ElRadioGroup, + ), +); +const ElSpace = defineAsyncComponent(() => + import('element-plus/es/components/space/index').then((res) => res.ElSpace), +); +const ElSwitch = defineAsyncComponent(() => + import('element-plus/es/components/switch/index').then((res) => res.ElSwitch), +); const ElCascader = defineAsyncComponent(() => import('element-plus/es/components/cascader/index').then( diff --git a/web/apps/web-ele/src/api/request.ts b/web/apps/web-ele/src/api/request.ts index 0c65642..f9dc50e 100644 --- a/web/apps/web-ele/src/api/request.ts +++ b/web/apps/web-ele/src/api/request.ts @@ -14,14 +14,19 @@ import { } from '@vben/request'; import { useAccessStore } from '@vben/stores'; -import { ElMessage } from 'element-plus/es/components/message/index'; - import { useAuthStore } from '#/store'; import { refreshTokenApi } from './core'; const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD); +async function showMessage(type: 'error' | 'warning', message: string) { + const { ElMessage } = await import( + 'element-plus/es/components/message/index' + ); + ElMessage[type](message); +} + /** 解析 API 错误体中的用户可读文案（兼容 FastAPI 字符串 detail 与结构化 detail） */ function resolveApiErrorMessage( responseData: Record, @@ -86,7 +91,7 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) { // 只有在有 token 的情况下才显示提示消息（说明是 token 失效） if (hasToken) { - ElMessage.warning('登录已失效，请重新登录'); + await showMessage('warning', '登录已失效，请重新登录'); if ( preferences.app.loginExpiredMode === 'modal' && @@ -242,7 +247,7 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) { }); // 显示错误消息 if (errorMessage) { - ElMessage.error(errorMessage || msg); + void showMessage('error', errorMessage || msg); } }), ); diff --git a/web/apps/web-ele/src/api/stream-request.ts b/web/apps/web-ele/src/api/stream-request.ts index 9570808..2905917 100644 --- a/web/apps/web-ele/src/api/stream-request.ts +++ b/web/apps/web-ele/src/api/stream-request.ts @@ -1,12 +1,17 @@ import { preferences } from '@vben/preferences'; import { useAccessStore } from '@vben/stores'; -import { ElMessage } from 'element-plus/es/components/message/index'; - import { useAuthStore } from '#/store'; import { refreshTokenApi } from './core'; +async function showErrorMessage(message: string) { + const { ElMessage } = await import( + 'element-plus/es/components/message/index' + ); + ElMessage.error(message); +} + /** * 流式请求配置 */ @@ -313,7 +318,7 @@ function doStreamRequest( } } - ElMessage.error(errorMessage); + void showErrorMessage(errorMessage); } eventHandler.onError?.(error); diff --git a/web/apps/web-ele/src/router/access.ts b/web/apps/web-ele/src/router/access.ts index 327f463..3d2b57e 100644 --- a/web/apps/web-ele/src/router/access.ts +++ b/web/apps/web-ele/src/router/access.ts @@ -6,8 +6,6 @@ import type { import { generateAccessible } from '@vben/access'; import { preferences } from '@vben/preferences'; -import { ElMessage } from 'element-plus/es/components/message/index'; - import { getAllMenusApi } from '#/api'; import { BasicLayout, IFrameView } from '#/layouts'; import { $t } from '#/locales'; @@ -55,6 +53,9 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) { return await generateAccessible(preferences.app.accessMode, { ...options, fetchMenuListAsync: async () => { + const { ElMessage } = await import( + 'element-plus/es/components/message/index' + ); ElMessage({ duration: 1500, message: `${$t('common.loadingMenu')}...`, diff --git a/web/apps/web-ele/src/store/auth.ts b/web/apps/web-ele/src/store/auth.ts index 6a4f4db..7babf7a 100644 --- a/web/apps/web-ele/src/store/auth.ts +++ b/web/apps/web-ele/src/store/auth.ts @@ -7,7 +7,6 @@ import { LOGIN_PATH } from '@vben/constants'; import { preferences } from '@vben/preferences'; import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores'; -import { ElNotification } from 'element-plus/es/components/notification/index'; import { defineStore } from 'pinia'; import { getAccessCodesApi, getUserInfoApi, loginApi, logoutApi } from '#/api'; @@ -70,6 +69,9 @@ export const useAuthStore = defineStore('auth', () => { } if (userInfo?.realName) { + const { ElNotification } = await import( + 'element-plus/es/components/notification/index' + ); ElNotification({ message: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`, title: $t('authentication.loginSuccess'),