chore: lazy load header widgets

web/packages/effects/layouts/src/basic/header/header.vue

@@ -1,20 +1,33 @@
 <script lang="ts" setup>
-import { computed, useSlots } from 'vue';
+import { computed, defineAsyncComponent, useSlots } from 'vue';
 
 import { useRefresh } from '@vben/hooks';
 import { RotateCw } from '@vben/icons';
 import { preferences, usePreferences } from '@vben/preferences';
 import { useAccessStore } from '@vben/stores';
 
-import { VbenFullScreen, VbenIconButton } from '@vben-core/shadcn-ui';
+import { VbenIconButton } from '@vben-core/shadcn-ui';
 
-import {
-  GlobalSearch,
-  LanguageToggle,
-  PreferencesButton,
-  ThemeToggle,
-  TimezoneButton,
-} from '../../widgets';
+const GlobalSearch = defineAsyncComponent(() =>
+  import('../../widgets/global-search').then((module) => module.GlobalSearch),
+);
+const LanguageToggle = defineAsyncComponent(
+  () => import('../../widgets/language-toggle.vue'),
+);
+const PreferencesButton = defineAsyncComponent(() =>
+  import('../../widgets/preferences').then((module) => module.PreferencesButton),
+);
+const ThemeToggle = defineAsyncComponent(() =>
+  import('../../widgets/theme-toggle').then((module) => module.ThemeToggle),
+);
+const TimezoneButton = defineAsyncComponent(() =>
+  import('../../widgets/timezone').then((module) => module.TimezoneButton),
+);
+const VbenFullScreen = defineAsyncComponent(() =>
+  import(
+    '../../../../../@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue'
+  ),
+);
 
 interface Props {
   /**