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',
+          });
+        },
+      );
     },
   });
 }