Lazy load startup element plus modules

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';
+const ElButton = defineAsyncComponent(() =>
-import {
+  import('element-plus/es/components/button/index').then((res) => res.ElButton),
-  ElCheckbox,
+);
-  ElCheckboxButton,
+const ElCheckbox = defineAsyncComponent(() =>
-  ElCheckboxGroup,
+  import('element-plus/es/components/checkbox/index').then(
-} from 'element-plus/es/components/checkbox/index';
+    (res) => res.ElCheckbox,
-import { ElDivider } from 'element-plus/es/components/divider/index';
+  ),
-import { ElInput } from 'element-plus/es/components/input/index';
+);
-import {
+const ElCheckboxButton = defineAsyncComponent(() =>
-  ElRadio,
+  import('element-plus/es/components/checkbox/index').then(
-  ElRadioButton,
+    (res) => res.ElCheckboxButton,
-  ElRadioGroup,
+  ),
-} from 'element-plus/es/components/radio/index';
+);
-import { ElSpace } from 'element-plus/es/components/space/index';
+const ElCheckboxGroup = defineAsyncComponent(() =>
-import { ElSwitch } from 'element-plus/es/components/switch/index';
+  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(

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<string, unknown>,
@@ -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);
       }
     }),
   );

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<T = any>(
             }
           }
 
-          ElMessage.error(errorMessage);
+          void showErrorMessage(errorMessage);
         }
 
         eventHandler.onError?.(error);

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')}...`,

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'),