Refactor to use async component imports (#7941)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.22.x

#### What this PR does / why we need it:

Lazy load partial routes to optimize initial load speed

#### Does this PR introduce a user-facing change?

```release-note
None
```

Author: ruibaby

ui/console-src/layouts/BasicLayout.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import GlobalSearchModal from "@/components/global-search/GlobalSearchModal.vue";
 import MenuLoading from "@/components/menu/MenuLoading.vue";
 import { RoutesMenu } from "@/components/menu/RoutesMenu";
 import { useRouteMenuGenerator } from "@/composables/use-route-menu-generator";
@@ -14,14 +13,19 @@ import {
   type UseOverlayScrollbarsParams,
 } from "overlayscrollbars-vue";
 import { defineStore } from "pinia";
-import { onMounted, reactive, ref } from "vue";
+import { defineAsyncComponent, onMounted, reactive, ref } from "vue";
 import { RouterView, useRoute } from "vue-router";
 import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
 
 const route = useRoute();
 
 // Global Search
 const globalSearchVisible = ref(false);
+
+const GlobalSearchModal = defineAsyncComponent(
+  () => import("@/components/global-search/GlobalSearchModal.vue")
+);
+
 useEventListener(document, "keydown", (e: KeyboardEvent) => {
   const { key, ctrlKey, metaKey } = e;
   if (key === "k" && ((ctrlKey && !isMac) || metaKey)) {

ui/console-src/modules/contents/pages/module.ts

@@ -2,7 +2,6 @@ import BasicLayout from "@console/layouts/BasicLayout.vue";
 import { IconPages } from "@halo-dev/components";
 import { definePlugin } from "@halo-dev/ui-shared";
 import { markRaw } from "vue";
-import SinglePageList from "./SinglePageList.vue";
 
 export default definePlugin({
   routes: [
@@ -25,7 +24,7 @@ export default definePlugin({
         {
           path: "",
           name: "SinglePages",
-          component: SinglePageList,
+          component: () => import("./SinglePageList.vue"),
         },
         {
           path: "deleted",

ui/console-src/modules/contents/posts/module.ts

@@ -3,8 +3,6 @@ import BlankLayout from "@console/layouts/BlankLayout.vue";
 import { IconBookRead } from "@halo-dev/components";
 import { definePlugin } from "@halo-dev/ui-shared";
 import { markRaw } from "vue";
-import PostEditor from "./PostEditor.vue";
-import PostList from "./PostList.vue";
 
 export default definePlugin({
   routes: [
@@ -28,7 +26,7 @@ export default definePlugin({
         {
           path: "",
           name: "Posts",
-          component: PostList,
+          component: () => import("./PostList.vue"),
         },
         {
           path: "deleted",
@@ -43,7 +41,7 @@ export default definePlugin({
         {
           path: "editor",
           name: "PostEditor",
-          component: PostEditor,
+          component: () => import("./PostEditor.vue"),
           meta: {
             title: "core.post_editor.title",
             searchable: true,

ui/console-src/modules/interface/themes/components/ThemeListModal.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { usePluginModuleStore } from "@/stores/plugin";
 import type { Theme } from "@halo-dev/api-client";
-import { VButton, VModal, VTabbar } from "@halo-dev/components";
+import { VButton, VLoading, VModal, VTabbar } from "@halo-dev/components";
 import { utils, type ThemeListTab } from "@halo-dev/ui-shared";
 import { useRouteQuery } from "@vueuse/router";
 import {
   computed,
+  defineAsyncComponent,
   inject,
-  markRaw,
   nextTick,
   onMounted,
   provide,
@@ -17,10 +17,6 @@ import {
   type Ref,
 } from "vue";
 import { useI18n } from "vue-i18n";
-import InstalledThemes from "./list-tabs/InstalledThemes.vue";
-import LocalUpload from "./list-tabs/LocalUpload.vue";
-import NotInstalledThemes from "./list-tabs/NotInstalledThemes.vue";
-import RemoteDownload from "./list-tabs/RemoteDownload.vue";
 
 const { t } = useI18n();
 
@@ -37,25 +33,37 @@ const tabs = shallowRef<ThemeListTab[]>([
   {
     id: "installed",
     label: t("core.theme.list_modal.tabs.installed"),
-    component: markRaw(InstalledThemes),
+    component: defineAsyncComponent({
+      loader: () => import("./list-tabs/InstalledThemes.vue"),
+      loadingComponent: VLoading,
+    }),
     priority: 10,
   },
   {
     id: "local-upload",
     label: t("core.theme.list_modal.tabs.local_upload"),
-    component: markRaw(LocalUpload),
+    component: defineAsyncComponent({
+      loader: () => import("./list-tabs/LocalUpload.vue"),
+      loadingComponent: VLoading,
+    }),
     priority: 20,
   },
   {
     id: "remote-download",
     label: t("core.theme.list_modal.tabs.remote_download.label"),
-    component: markRaw(RemoteDownload),
+    component: defineAsyncComponent({
+      loader: () => import("./list-tabs/RemoteDownload.vue"),
+      loadingComponent: VLoading,
+    }),
     priority: 30,
   },
   {
     id: "not_installed",
     label: t("core.theme.list_modal.tabs.not_installed"),
-    component: markRaw(NotInstalledThemes),
+    component: defineAsyncComponent({
+      loader: () => import("./list-tabs/NotInstalledThemes.vue"),
+      loadingComponent: VLoading,
+    }),
     priority: 40,
   },
 ]);

ui/console-src/modules/interface/themes/module.ts

@@ -1,17 +1,14 @@
 import { IconPalette } from "@halo-dev/components";
 import { definePlugin } from "@halo-dev/ui-shared";
 import { markRaw } from "vue";
-import ThemeDetail from "./ThemeDetail.vue";
-import ThemeSetting from "./ThemeSetting.vue";
-import ThemeLayout from "./layouts/ThemeLayout.vue";
 
 export default definePlugin({
   components: {},
   routes: [
     {
       path: "/theme",
       name: "ThemeRoot",
-      component: ThemeLayout,
+      component: () => import("./layouts/ThemeLayout.vue"),
       meta: {
         title: "core.theme.title",
         searchable: true,
@@ -27,12 +24,12 @@ export default definePlugin({
         {
           path: "",
           name: "ThemeDetail",
-          component: ThemeDetail,
+          component: () => import("./ThemeDetail.vue"),
         },
         {
           path: "settings/:group",
           name: "ThemeSetting",
-          component: ThemeSetting,
+          component: () => import("./ThemeSetting.vue"),
           meta: {
             title: "core.theme.settings.title",
             permissions: ["system:themes:view"],

ui/console-src/modules/system/backup/Backups.vue

@@ -1,34 +1,38 @@
 <script lang="ts" setup>
+import { usePluginModuleStore } from "@/stores/plugin";
 import {
   IconAddCircle,
   IconServerLine,
   VButton,
   VCard,
+  VLoading,
   VPageHeader,
   VTabbar,
 } from "@halo-dev/components";
-
-import { usePluginModuleStore } from "@/stores/plugin";
 import type { BackupTab } from "@halo-dev/ui-shared";
 import { useRouteQuery } from "@vueuse/router";
-import { markRaw, onMounted, shallowRef } from "vue";
+import { defineAsyncComponent, onMounted, shallowRef } from "vue";
 import { useI18n } from "vue-i18n";
 import { useBackup } from "./composables/use-backup";
-import ListTab from "./tabs/List.vue";
-import RestoreTab from "./tabs/Restore.vue";
 
 const { t } = useI18n();
 
 const tabs = shallowRef<BackupTab[]>([
   {
     id: "backups",
     label: t("core.backup.tabs.backup_list"),
-    component: markRaw(ListTab),
+    component: defineAsyncComponent({
+      loader: () => import("./tabs/List.vue"),
+      loadingComponent: VLoading,
+    }),
   },
   {
     id: "restore",
     label: t("core.backup.tabs.restore"),
-    component: markRaw(RestoreTab),
+    component: defineAsyncComponent({
+      loader: () => import("./tabs/Restore.vue"),
+      loadingComponent: VLoading,
+    }),
   },
 ]);
 

ui/console-src/modules/system/plugins/components/PluginInstallationModal.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { usePluginModuleStore } from "@/stores/plugin";
 import type { Plugin } from "@halo-dev/api-client";
-import { VButton, VModal, VTabbar } from "@halo-dev/components";
+import { VButton, VLoading, VModal, VTabbar } from "@halo-dev/components";
 import { utils, type PluginInstallationTab } from "@halo-dev/ui-shared";
 import { useRouteQuery } from "@vueuse/router";
 import {
   computed,
-  markRaw,
+  defineAsyncComponent,
   nextTick,
   onMounted,
   provide,
@@ -16,8 +16,6 @@ import {
   type Ref,
 } from "vue";
 import { useI18n } from "vue-i18n";
-import LocalUpload from "./installation-tabs/LocalUpload.vue";
-import RemoteDownload from "./installation-tabs/RemoteDownload.vue";
 
 const { t } = useI18n();
 
@@ -43,13 +41,19 @@ const tabs = shallowRef<PluginInstallationTab[]>([
   {
     id: "local",
     label: t("core.plugin.upload_modal.tabs.local"),
-    component: markRaw(LocalUpload),
+    component: defineAsyncComponent({
+      loader: () => import("./installation-tabs/LocalUpload.vue"),
+      loadingComponent: VLoading,
+    }),
     priority: 10,
   },
   {
     id: "remote",
     label: t("core.plugin.upload_modal.tabs.remote.title"),
-    component: markRaw(RemoteDownload),
+    component: defineAsyncComponent({
+      loader: () => import("./installation-tabs/RemoteDownload.vue"),
+      loadingComponent: VLoading,
+    }),
     priority: 20,
   },
 ]);

ui/console-src/modules/system/plugins/composables/use-plugin.ts

@@ -6,15 +6,13 @@ import {
   type Plugin,
   type SettingForm,
 } from "@halo-dev/api-client";
-import { Dialog, Toast } from "@halo-dev/components";
+import { Dialog, Toast, VLoading } from "@halo-dev/components";
 import { utils, type PluginTab } from "@halo-dev/ui-shared";
 import { useMutation, useQuery } from "@tanstack/vue-query";
 import { useRouteQuery } from "@vueuse/router";
 import type { ComputedRef, Ref } from "vue";
-import { computed, markRaw, ref, shallowRef } from "vue";
+import { computed, defineAsyncComponent, ref, shallowRef } from "vue";
 import { useI18n } from "vue-i18n";
-import DetailTab from "../components/tabs/Detail.vue";
-import SettingTab from "../components/tabs/Setting.vue";
 
 interface usePluginLifeCycleReturn {
   isStarted: ComputedRef<boolean | undefined>;
@@ -286,7 +284,10 @@ export function usePluginDetailTabs(
     {
       id: "detail",
       label: t("core.plugin.tabs.detail"),
-      component: markRaw(DetailTab),
+      component: defineAsyncComponent({
+        loader: () => import("../components/tabs/Detail.vue"),
+        loadingComponent: VLoading,
+      }),
     },
   ];
 
@@ -338,7 +339,10 @@ export function usePluginDetailTabs(
             return {
               id: item.group,
               label: item.label || "",
-              component: markRaw(SettingTab),
+              component: defineAsyncComponent({
+                loader: () => import("../components/tabs/Setting.vue"),
+                loadingComponent: VLoading,
+              }),
             };
           }),
         ] as PluginTab[];

ui/console-src/modules/system/settings/SystemSettings.vue

@@ -4,16 +4,22 @@ import { coreApiClient } from "@halo-dev/api-client";
 import {
   IconSettings,
   VCard,
+  VLoading,
   VPageHeader,
   VTabbar,
 } from "@halo-dev/components";
 import { utils } from "@halo-dev/ui-shared";
 import { useQuery } from "@tanstack/vue-query";
 import { useRouteQuery } from "@vueuse/router";
 import type { Component, Raw } from "vue";
-import { markRaw, provide, shallowRef, type Ref } from "vue";
+import {
+  defineAsyncComponent,
+  markRaw,
+  provide,
+  shallowRef,
+  type Ref,
+} from "vue";
 import { useI18n } from "vue-i18n";
-import NotificationsTab from "./tabs/Notifications.vue";
 import SettingTab from "./tabs/Setting.vue";
 
 const { t } = useI18n();
@@ -65,7 +71,10 @@ const { data: setting } = useQuery({
           {
             id: "notification",
             label: "通知设置",
-            component: markRaw(NotificationsTab),
+            component: defineAsyncComponent({
+              loader: () => import("./tabs/Notifications.vue"),
+              loadingComponent: VLoading,
+            }),
           },
         ];
       }

ui/console-src/modules/system/settings/module.ts

@@ -2,7 +2,6 @@ import BasicLayout from "@console/layouts/BasicLayout.vue";
 import { IconSettings } from "@halo-dev/components";
 import { definePlugin } from "@halo-dev/ui-shared";
 import { markRaw } from "vue";
-import SystemSettings from "./SystemSettings.vue";
 
 export default definePlugin({
   components: {},
@@ -25,7 +24,7 @@ export default definePlugin({
         {
           path: "",
           name: "SystemSetting",
-          component: SystemSettings,
+          component: () => import("./SystemSettings.vue"),
         },
       ],
     },