perf: Remove some asynchronously loaded components

packages/admin/src/utils/factory/createAsyncComponent.tsx → packages/admin/src/internal/factory/createAsyncComponent.ts

-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent, h } from 'vue'
 import { Spin } from 'ant-design-vue'
 import { NOOP } from '@vben-admin/utils'
 
@@ -20,9 +20,7 @@ export function createAsyncComponent(loader: Fn, options: Options = {}) {
   } = options
   return defineAsyncComponent({
     loader,
-    loadingComponent: loading ? (
-      <Spin spinning={true} size={size} />
-    ) : undefined,
+    loadingComponent: loading ? h(Spin, { spinning: true, size }) : undefined,
     timeout,
     delay,
     /**

packages/admin/src/internal/factory/index.ts

+export { createAsyncComponent as componentFactory } from './createAsyncComponent'

packages/admin/src/layouts/default/feature/index.vue

 <script lang="ts">
 import { defineComponent, computed, unref } from 'vue'
 import { BackTop } from 'ant-design-vue'
-
 import { useRootSetting } from '/@/hooks/setting/useRootSetting'
 import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'
 import { useDesign } from '/@/hooks/web/useDesign'
 import { useUserStoreWithOut } from '/@/store/modules/user'
-
 import { SettingButtonPositionEnum } from '@vben-admin/tokens'
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'
-
 import SessionTimeoutLogin from '/@/views/sys/login/SessionTimeoutLogin.vue'
+import LayoutLockPage from '/@/views/sys/lock/index.vue'
+import SettingDrawer from '/@/layouts/default/setting/index.vue'
 export default defineComponent({
   name: 'LayoutFeatures',
   components: {
     BackTop,
-    LayoutLockPage: createAsyncComponent(
-      () => import('/@/views/sys/lock/index.vue'),
-    ),
-    SettingDrawer: createAsyncComponent(
-      () => import('/@/layouts/default/setting/index.vue'),
-    ),
+    LayoutLockPage,
+    SettingDrawer,
     SessionTimeoutLogin,
   },
   setup() {

packages/admin/src/layouts/default/header/components/index.ts

-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'
+import { componentFactory } from '/@/internal/factory'
 import FullScreen from './FullScreen.vue'
+import UserDropDown from './user-dropdown/index.vue'
 
-export const UserDropDown = createAsyncComponent(
-  () => import('./user-dropdown/index.vue'),
-  {
-    loading: true,
-  },
-)
-
-export const LayoutBreadcrumb = createAsyncComponent(
+export const LayoutBreadcrumb = componentFactory(
   () => import('./Breadcrumb.vue'),
 )
 
-export const Notify = createAsyncComponent(() => import('./notify/index.vue'))
+export const Notify = componentFactory(() => import('./notify/index.vue'))
 
-export const ErrorAction = createAsyncComponent(
-  () => import('./ErrorAction.vue'),
-)
+export const ErrorAction = componentFactory(() => import('./ErrorAction.vue'))
 
-export { FullScreen }
+export { FullScreen, UserDropDown }

packages/admin/src/layouts/default/header/components/user-dropdown/index.vue

@@ -49,7 +49,8 @@ import { useDesign } from '/@/hooks/web/useDesign'
 import { useModal } from '/@/components/Modal'
 import headerImg from '/@/assets/images/header.jpg'
 import { openWindow } from '@vben-admin/utils'
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'
+import MenuItem from './DropMenuItem.vue'
+import LockAction from '../lock/LockModal.vue'
 
 type MenuEvent = 'logout' | 'doc' | 'lock'
 
@@ -58,9 +59,9 @@ export default defineComponent({
   components: {
     Dropdown,
     Menu,
-    MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
+    MenuItem,
     MenuDivider: Menu.Divider,
-    LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
+    LockAction,
   },
   props: {
     theme: {

packages/admin/src/layouts/default/header/index.vue

@@ -58,7 +58,7 @@
       />
 
       <AppLocalePicker
-        v-if="getShowLocalePicker"
+        v-if="showLocalePicker"
         :reload="true"
         :showText="false"
         :class="`${prefixCls}-action__item`"
@@ -102,8 +102,8 @@ import {
 import { useAppInject } from '/@/hooks/web/useAppInject'
 import { useDesign } from '/@/hooks/web/useDesign'
 
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'
 import { useLocale } from '@vben-admin/locale'
+import SettingDrawer from '/@/layouts/default/setting/index.vue'
 
 export default defineComponent({
   name: 'LayoutHeader',
@@ -119,12 +119,7 @@ export default defineComponent({
     Notify,
     AppSearch,
     ErrorAction,
-    SettingDrawer: createAsyncComponent(
-      () => import('/@/layouts/default/setting/index.vue'),
-      {
-        loading: true,
-      },
-    ),
+    SettingDrawer,
   },
   props: {
     fixed: { type: Boolean },
@@ -156,7 +151,7 @@ export default defineComponent({
       getShowSearch,
     } = useHeaderSetting()
 
-    const { getShowLocalePicker } = useLocale()
+    const { showLocalePicker } = useLocale()
 
     const { getIsMobile } = useAppInject()
 
@@ -213,7 +208,7 @@ export default defineComponent({
       getSplit,
       getMenuMode,
       getShowTopMenu,
-      getShowLocalePicker,
+      showLocalePicker,
       getShowFullScreen,
       getShowNotice,
       getUseErrorHandle,

packages/admin/src/layouts/default/index.vue

@@ -16,7 +16,6 @@
 <script lang="ts">
 import { defineComponent, computed, unref } from 'vue'
 import { Layout } from 'ant-design-vue'
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'
 
 import LayoutHeader from './header/index.vue'
 import LayoutContent from './content/index.vue'
@@ -27,16 +26,14 @@ import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'
 import { useDesign } from '/@/hooks/web/useDesign'
 import { useLockPage } from '/@/hooks/web/useLockPage'
 import { useAppInject } from '/@/hooks/web/useAppInject'
+import LayoutFeatures from '/@/layouts/default/feature/index.vue'
+import LayoutFooter from '/@/layouts/default/footer/index.vue'
 
 export default defineComponent({
   name: 'DefaultLayout',
   components: {
-    LayoutFeatures: createAsyncComponent(
-      () => import('/@/layouts/default/feature/index.vue'),
-    ),
-    LayoutFooter: createAsyncComponent(
-      () => import('/@/layouts/default/footer/index.vue'),
-    ),
+    LayoutFeatures,
+    LayoutFooter,
     LayoutHeader,
     LayoutContent,
     LayoutSideBar,

packages/admin/src/layouts/default/setting/components/index.ts

-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'
+import { componentFactory } from '/@/internal/factory'
 
-export const TypePicker = createAsyncComponent(() => import('./TypePicker.vue'))
-export const ThemeColorPicker = createAsyncComponent(
+export const TypePicker = componentFactory(() => import('./TypePicker.vue'))
+export const ThemeColorPicker = componentFactory(
   () => import('./ThemeColorPicker.vue'),
 )
-export const SettingFooter = createAsyncComponent(
+export const SettingFooter = componentFactory(
   () => import('./SettingFooter.vue'),
 )
-export const SwitchItem = createAsyncComponent(() => import('./SwitchItem.vue'))
-export const SelectItem = createAsyncComponent(() => import('./SelectItem.vue'))
-export const InputNumberItem = createAsyncComponent(
+export const SwitchItem = componentFactory(() => import('./SwitchItem.vue'))
+export const SelectItem = componentFactory(() => import('./SelectItem.vue'))
+export const InputNumberItem = componentFactory(
   () => import('./InputNumberItem.vue'),
 )

packages/admin/src/layouts/default/trigger/index.vue

@@ -4,13 +4,13 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'
+import SiderTrigger from './SiderTrigger.vue'
 import HeaderTrigger from './HeaderTrigger.vue'
 
 export default defineComponent({
   name: 'LayoutTrigger',
   components: {
-    SiderTrigger: createAsyncComponent(() => import('./SiderTrigger.vue')),
+    SiderTrigger,
     HeaderTrigger: HeaderTrigger,
   },
   props: {

packages/utils/src/util.ts

+import { unref } from 'vue'
 // dynamic use hook props
 export const getDynamicProps = <T, U>(props: T): Partial<U> => {
   const ret: Recordable = {}