Reduce startup element plus payload

web/apps/web-ele/src/adapter/component/index.ts

@@ -19,23 +19,49 @@ import {
   ElCheckboxButton,
   ElCheckboxGroup,
 } from 'element-plus/es/components/checkbox/index';
-import { ElCascader } from 'element-plus/es/components/cascader/index';
-import { ElDatePicker } from 'element-plus/es/components/date-picker/index';
 import { ElDivider } from 'element-plus/es/components/divider/index';
 import { ElInput } from 'element-plus/es/components/input/index';
-import { ElInputNumber } from 'element-plus/es/components/input-number/index';
-import { ElNotification } from 'element-plus/es/components/notification/index';
 import {
   ElRadio,
   ElRadioButton,
   ElRadioGroup,
 } from 'element-plus/es/components/radio/index';
-import { ElSelectV2 } from 'element-plus/es/components/select-v2/index';
 import { ElSpace } from 'element-plus/es/components/space/index';
 import { ElSwitch } from 'element-plus/es/components/switch/index';
-import { ElTimePicker } from 'element-plus/es/components/time-picker/index';
-import { ElTreeSelect } from 'element-plus/es/components/tree-select/index';
-import { ElUpload } from 'element-plus/es/components/upload/index';
+
+const ElCascader = defineAsyncComponent(() =>
+  import('element-plus/es/components/cascader/index').then(
+    (res) => res.ElCascader,
+  ),
+);
+const ElDatePicker = defineAsyncComponent(() =>
+  import('element-plus/es/components/date-picker/index').then(
+    (res) => res.ElDatePicker,
+  ),
+);
+const ElInputNumber = defineAsyncComponent(() =>
+  import('element-plus/es/components/input-number/index').then(
+    (res) => res.ElInputNumber,
+  ),
+);
+const ElSelectV2 = defineAsyncComponent(() =>
+  import('element-plus/es/components/select-v2/index').then(
+    (res) => res.ElSelectV2,
+  ),
+);
+const ElTimePicker = defineAsyncComponent(() =>
+  import('element-plus/es/components/time-picker/index').then(
+    (res) => res.ElTimePicker,
+  ),
+);
+const ElTreeSelect = defineAsyncComponent(() =>
+  import('element-plus/es/components/tree-select/index').then(
+    (res) => res.ElTreeSelect,
+  ),
+);
+const ElUpload = defineAsyncComponent(() =>
+  import('element-plus/es/components/upload/index').then((res) => res.ElUpload),
+);
 
 const DeptSelector = defineAsyncComponent(() =>
   import('#/components/zq-form/dept-selector/dept-selector.vue').then(
@@ -87,7 +113,7 @@ const withDefaultPlaceholder = <T extends Component>(
   componentProps: Recordable<any> = {},
 ) => {
   return defineComponent({
-    name: component.name,
+    name: (component as any).name,
     inheritAttrs: false,
     setup: (props: any, { attrs, expose, slots }) => {
       const placeholder =
@@ -296,13 +322,17 @@ async function initComponentAdapter() {
   globalShareState.defineMessage({
     // 复制成功消息提示
     copyPreferencesSuccess: (title, content) => {
-      ElNotification({
-        title,
-        message: content,
-        position: 'bottom-right',
-        duration: 0,
-        type: 'success',
-      });
+      void import('element-plus/es/components/notification/index').then(
+        ({ ElNotification }) => {
+          ElNotification({
+            title,
+            message: content,
+            position: 'bottom-right',
+            duration: 0,
+            type: 'success',
+          });
+        },
+      );
     },
   });
 }

web/apps/web-ele/src/api/request.ts

@@ -14,7 +14,7 @@ import {
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
-import { ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus/es/components/message/index';
 
 import { useAuthStore } from '#/store';
 

web/apps/web-ele/src/api/stream-request.ts

@@ -1,7 +1,7 @@
 import { preferences } from '@vben/preferences';
 import { useAccessStore } from '@vben/stores';
 
-import { ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus/es/components/message/index';
 
 import { useAuthStore } from '#/store';
 

web/apps/web-ele/src/app.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useElementPlusDesignTokens } from '@vben/hooks';
 
-import { ElConfigProvider } from 'element-plus';
+import { ElConfigProvider } from 'element-plus/es/components/config-provider/index';
 
 import { elementLocale } from '#/locales';
 

web/apps/web-ele/src/plugins/element-plus.ts

@@ -1,142 +1,201 @@
-import type { App, Plugin } from 'vue';
+import type { App, Component } from 'vue';
+
+import { defineAsyncComponent } from 'vue';
 
-import { ElAlert } from 'element-plus/es/components/alert/index';
-import { ElAvatar } from 'element-plus/es/components/avatar/index';
-import { ElBadge } from 'element-plus/es/components/badge/index';
-import {
-  ElBreadcrumb,
-  ElBreadcrumbItem,
-} from 'element-plus/es/components/breadcrumb/index';
-import { ElButton, ElButtonGroup } from 'element-plus/es/components/button/index';
-import { ElCard } from 'element-plus/es/components/card/index';
-import { ElCascader } from 'element-plus/es/components/cascader/index';
-import {
-  ElCheckbox,
-  ElCheckboxButton,
-  ElCheckboxGroup,
-} from 'element-plus/es/components/checkbox/index';
-import {
-  ElCollapse,
-  ElCollapseItem,
-} from 'element-plus/es/components/collapse/index';
-import { ElColorPicker } from 'element-plus/es/components/color-picker/index';
-import { ElConfigProvider } from 'element-plus/es/components/config-provider/index';
-import { ElDatePicker } from 'element-plus/es/components/date-picker/index';
-import {
-  ElDescriptions,
-  ElDescriptionsItem,
-} from 'element-plus/es/components/descriptions/index';
-import { ElDialog } from 'element-plus/es/components/dialog/index';
-import { ElDivider } from 'element-plus/es/components/divider/index';
-import { ElDrawer } from 'element-plus/es/components/drawer/index';
-import {
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-} from 'element-plus/es/components/dropdown/index';
-import { ElEmpty } from 'element-plus/es/components/empty/index';
-import { ElForm, ElFormItem } from 'element-plus/es/components/form/index';
-import { ElIcon } from 'element-plus/es/components/icon/index';
-import { ElImageViewer } from 'element-plus/es/components/image-viewer/index';
-import { ElInput } from 'element-plus/es/components/input/index';
-import { ElInputNumber } from 'element-plus/es/components/input-number/index';
 import { ElLoading } from 'element-plus/es/components/loading/index';
-import { ElPagination } from 'element-plus/es/components/pagination/index';
-import { ElPopconfirm } from 'element-plus/es/components/popconfirm/index';
-import { ElPopover } from 'element-plus/es/components/popover/index';
-import { ElProgress } from 'element-plus/es/components/progress/index';
-import {
-  ElRadio,
-  ElRadioButton,
-  ElRadioGroup,
-} from 'element-plus/es/components/radio/index';
-import { ElScrollbar } from 'element-plus/es/components/scrollbar/index';
-import { ElOption, ElSelect } from 'element-plus/es/components/select/index';
-import {
-  ElSkeleton,
-  ElSkeletonItem,
-} from 'element-plus/es/components/skeleton/index';
-import { ElSlider } from 'element-plus/es/components/slider/index';
-import {
-  ElSplitter,
-  ElSplitterPanel,
-} from 'element-plus/es/components/splitter/index';
-import { ElSwitch } from 'element-plus/es/components/switch/index';
-import { ElTable, ElTableColumn } from 'element-plus/es/components/table/index';
-import { ElTabPane, ElTabs } from 'element-plus/es/components/tabs/index';
-import { ElTag } from 'element-plus/es/components/tag/index';
-import {
-  ElTimeline,
-  ElTimelineItem,
-} from 'element-plus/es/components/timeline/index';
-import { ElTooltip } from 'element-plus/es/components/tooltip/index';
-import { ElTree } from 'element-plus/es/components/tree/index';
-import { ElUpload } from 'element-plus/es/components/upload/index';
 
-const components: Plugin[] = [
-  ElAlert,
-  ElAvatar,
-  ElBadge,
-  ElBreadcrumb,
-  ElBreadcrumbItem,
-  ElButton,
-  ElButtonGroup,
-  ElCard,
-  ElCascader,
-  ElCheckbox,
-  ElCheckboxButton,
-  ElCheckboxGroup,
-  ElCollapse,
-  ElCollapseItem,
-  ElColorPicker,
-  ElConfigProvider,
-  ElDatePicker,
-  ElDescriptions,
-  ElDescriptionsItem,
-  ElDialog,
-  ElDivider,
-  ElDrawer,
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElEmpty,
-  ElForm,
-  ElFormItem,
-  ElIcon,
-  ElImageViewer,
-  ElInput,
-  ElInputNumber,
-  ElOption,
-  ElPagination,
-  ElPopconfirm,
-  ElPopover,
-  ElProgress,
-  ElRadio,
-  ElRadioButton,
-  ElRadioGroup,
-  ElScrollbar,
-  ElSelect,
-  ElSkeleton,
-  ElSkeletonItem,
-  ElSlider,
-  ElSplitter,
-  ElSplitterPanel,
-  ElSwitch,
-  ElTable,
-  ElTableColumn,
-  ElTabPane,
-  ElTabs,
-  ElTag,
-  ElTimeline,
-  ElTimelineItem,
-  ElTooltip,
-  ElTree,
-  ElUpload,
-];
+type ElementComponentLoader = () => Promise<Component>;
+
+const asyncComponents: Record<string, ElementComponentLoader> = {
+  ElAlert: () =>
+    import('element-plus/es/components/alert/index').then((m) => m.ElAlert),
+  ElAvatar: () =>
+    import('element-plus/es/components/avatar/index').then((m) => m.ElAvatar),
+  ElBadge: () =>
+    import('element-plus/es/components/badge/index').then((m) => m.ElBadge),
+  ElBreadcrumb: () =>
+    import('element-plus/es/components/breadcrumb/index').then(
+      (m) => m.ElBreadcrumb,
+    ),
+  ElBreadcrumbItem: () =>
+    import('element-plus/es/components/breadcrumb/index').then(
+      (m) => m.ElBreadcrumbItem,
+    ),
+  ElButton: () =>
+    import('element-plus/es/components/button/index').then((m) => m.ElButton),
+  ElButtonGroup: () =>
+    import('element-plus/es/components/button/index').then(
+      (m) => m.ElButtonGroup,
+    ),
+  ElCard: () =>
+    import('element-plus/es/components/card/index').then((m) => m.ElCard),
+  ElCascader: () =>
+    import('element-plus/es/components/cascader/index').then(
+      (m) => m.ElCascader,
+    ),
+  ElCheckbox: () =>
+    import('element-plus/es/components/checkbox/index').then(
+      (m) => m.ElCheckbox,
+    ),
+  ElCheckboxButton: () =>
+    import('element-plus/es/components/checkbox/index').then(
+      (m) => m.ElCheckboxButton,
+    ),
+  ElCheckboxGroup: () =>
+    import('element-plus/es/components/checkbox/index').then(
+      (m) => m.ElCheckboxGroup,
+    ),
+  ElCollapse: () =>
+    import('element-plus/es/components/collapse/index').then(
+      (m) => m.ElCollapse,
+    ),
+  ElCollapseItem: () =>
+    import('element-plus/es/components/collapse/index').then(
+      (m) => m.ElCollapseItem,
+    ),
+  ElColorPicker: () =>
+    import('element-plus/es/components/color-picker/index').then(
+      (m) => m.ElColorPicker,
+    ),
+  ElConfigProvider: () =>
+    import('element-plus/es/components/config-provider/index').then(
+      (m) => m.ElConfigProvider,
+    ),
+  ElDatePicker: () =>
+    import('element-plus/es/components/date-picker/index').then(
+      (m) => m.ElDatePicker,
+    ),
+  ElDescriptions: () =>
+    import('element-plus/es/components/descriptions/index').then(
+      (m) => m.ElDescriptions,
+    ),
+  ElDescriptionsItem: () =>
+    import('element-plus/es/components/descriptions/index').then(
+      (m) => m.ElDescriptionsItem,
+    ),
+  ElDialog: () =>
+    import('element-plus/es/components/dialog/index').then((m) => m.ElDialog),
+  ElDivider: () =>
+    import('element-plus/es/components/divider/index').then((m) => m.ElDivider),
+  ElDrawer: () =>
+    import('element-plus/es/components/drawer/index').then((m) => m.ElDrawer),
+  ElDropdown: () =>
+    import('element-plus/es/components/dropdown/index').then(
+      (m) => m.ElDropdown,
+    ),
+  ElDropdownItem: () =>
+    import('element-plus/es/components/dropdown/index').then(
+      (m) => m.ElDropdownItem,
+    ),
+  ElDropdownMenu: () =>
+    import('element-plus/es/components/dropdown/index').then(
+      (m) => m.ElDropdownMenu,
+    ),
+  ElEmpty: () =>
+    import('element-plus/es/components/empty/index').then((m) => m.ElEmpty),
+  ElForm: () =>
+    import('element-plus/es/components/form/index').then((m) => m.ElForm),
+  ElFormItem: () =>
+    import('element-plus/es/components/form/index').then((m) => m.ElFormItem),
+  ElIcon: () =>
+    import('element-plus/es/components/icon/index').then((m) => m.ElIcon),
+  ElImageViewer: () =>
+    import('element-plus/es/components/image-viewer/index').then(
+      (m) => m.ElImageViewer,
+    ),
+  ElInput: () =>
+    import('element-plus/es/components/input/index').then((m) => m.ElInput),
+  ElInputNumber: () =>
+    import('element-plus/es/components/input-number/index').then(
+      (m) => m.ElInputNumber,
+    ),
+  ElOption: () =>
+    import('element-plus/es/components/select/index').then((m) => m.ElOption),
+  ElPagination: () =>
+    import('element-plus/es/components/pagination/index').then(
+      (m) => m.ElPagination,
+    ),
+  ElPopconfirm: () =>
+    import('element-plus/es/components/popconfirm/index').then(
+      (m) => m.ElPopconfirm,
+    ),
+  ElPopover: () =>
+    import('element-plus/es/components/popover/index').then(
+      (m) => m.ElPopover,
+    ),
+  ElProgress: () =>
+    import('element-plus/es/components/progress/index').then(
+      (m) => m.ElProgress,
+    ),
+  ElRadio: () =>
+    import('element-plus/es/components/radio/index').then((m) => m.ElRadio),
+  ElRadioButton: () =>
+    import('element-plus/es/components/radio/index').then(
+      (m) => m.ElRadioButton,
+    ),
+  ElRadioGroup: () =>
+    import('element-plus/es/components/radio/index').then(
+      (m) => m.ElRadioGroup,
+    ),
+  ElScrollbar: () =>
+    import('element-plus/es/components/scrollbar/index').then(
+      (m) => m.ElScrollbar,
+    ),
+  ElSelect: () =>
+    import('element-plus/es/components/select/index').then((m) => m.ElSelect),
+  ElSkeleton: () =>
+    import('element-plus/es/components/skeleton/index').then(
+      (m) => m.ElSkeleton,
+    ),
+  ElSkeletonItem: () =>
+    import('element-plus/es/components/skeleton/index').then(
+      (m) => m.ElSkeletonItem,
+    ),
+  ElSlider: () =>
+    import('element-plus/es/components/slider/index').then((m) => m.ElSlider),
+  ElSplitter: () =>
+    import('element-plus/es/components/splitter/index').then(
+      (m) => m.ElSplitter,
+    ),
+  ElSplitterPanel: () =>
+    import('element-plus/es/components/splitter/index').then(
+      (m) => m.ElSplitterPanel,
+    ),
+  ElSwitch: () =>
+    import('element-plus/es/components/switch/index').then((m) => m.ElSwitch),
+  ElTable: () =>
+    import('element-plus/es/components/table/index').then((m) => m.ElTable),
+  ElTableColumn: () =>
+    import('element-plus/es/components/table/index').then(
+      (m) => m.ElTableColumn,
+    ),
+  ElTabPane: () =>
+    import('element-plus/es/components/tabs/index').then((m) => m.ElTabPane),
+  ElTabs: () =>
+    import('element-plus/es/components/tabs/index').then((m) => m.ElTabs),
+  ElTag: () =>
+    import('element-plus/es/components/tag/index').then((m) => m.ElTag),
+  ElTimeline: () =>
+    import('element-plus/es/components/timeline/index').then(
+      (m) => m.ElTimeline,
+    ),
+  ElTimelineItem: () =>
+    import('element-plus/es/components/timeline/index').then(
+      (m) => m.ElTimelineItem,
+    ),
+  ElTooltip: () =>
+    import('element-plus/es/components/tooltip/index').then(
+      (m) => m.ElTooltip,
+    ),
+  ElTree: () =>
+    import('element-plus/es/components/tree/index').then((m) => m.ElTree),
+  ElUpload: () =>
+    import('element-plus/es/components/upload/index').then((m) => m.ElUpload),
+};
 
 function setupElementPlus(app: App) {
-  for (const component of components) {
-    app.use(component);
+  for (const [name, loader] of Object.entries(asyncComponents)) {
+    app.component(name, defineAsyncComponent(loader));
   }
 
   app.directive('loading', ElLoading.directive);

web/apps/web-ele/src/router/access.ts

@@ -6,7 +6,7 @@ import type {
 import { generateAccessible } from '@vben/access';
 import { preferences } from '@vben/preferences';
 
-import { ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus/es/components/message/index';
 
 import { getAllMenusApi } from '#/api';
 import { BasicLayout, IFrameView } from '#/layouts';

web/apps/web-ele/src/store/auth.ts

@@ -7,7 +7,7 @@ import { LOGIN_PATH } from '@vben/constants';
 import { preferences } from '@vben/preferences';
 import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 
-import { ElNotification } from 'element-plus';
+import { ElNotification } from 'element-plus/es/components/notification/index';
 import { defineStore } from 'pinia';
 
 import { getAccessCodesApi, getUserInfoApi, loginApi, logoutApi } from '#/api';

web/apps/web-ele/src/utils/form-lifecycle-hooks.ts

@@ -4,7 +4,7 @@ import type {
   FormLifecycleMode,
 } from '#/components/form-design/store/formDesignStore';
 
-import { ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus/es/components/message/index';
 
 import { getWorkflowDetailApi, runWorkflowApi } from '#/api/ai-platform/ai-platform';
 import { requestClient } from '#/api/request';