performances: async loading

src/App.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeMount } from "vue";
-import PageRandom from "@/components/PageRandom.vue";
-import PageInput from "@/components/PageInput.vue";
+import { ref, onMounted, defineAsyncComponent } from "vue";
+const PageRandom = defineAsyncComponent(() => import("@/components/PageRandom.vue"));
+const PageInput = defineAsyncComponent(() => import("@/components/PageInput.vue"));
+const PageHistory = defineAsyncComponent(() => import("./components/PageHistory.vue"));
 import { DomainFactory } from "@/lib/factory";
-import PageHistory from "./components/PageHistory.vue";
 
 const visible = ref<boolean>(false);
 const factory = ref<DomainFactory>(new DomainFactory());
 
-onBeforeMount(() => {
-  factory.value.init();
-});
-
 onMounted(() => {
   setTimeout(() => {
     visible.value = true;
@@ -22,37 +18,17 @@ onMounted(() => {
 <template>
   <div :style="{ display: visible ? 'inherit' : 'none' }">
     <div class="tabs tabs-xs tabs-bottom w-xl max-w-svw shrink-0">
-      <input
-        type="radio"
-        name="app_tabs"
-        class="tab"
-        :aria-label="$t('tab.random')"
-        checked
-      />
-      <div
-        class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
-      >
+      <input type="radio" name="app_tabs" class="tab" :aria-label="$t('tab.random')" checked />
+      <div class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden">
         <PageRandom :factory="factory" />
       </div>
 
-      <input
-        type="radio"
-        name="app_tabs"
-        class="tab"
-        :aria-label="$t('tab.input')"
-      />
-      <div
-        class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
-      >
+      <input type="radio" name="app_tabs" class="tab" :aria-label="$t('tab.input')" />
+      <div class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden">
         <PageInput :factory="factory" />
       </div>
 
-      <input
-        type="radio"
-        name="app_tabs"
-        class="tab"
-        :aria-label="$t('tab.history')"
-      />
+      <input type="radio" name="app_tabs" class="tab" :aria-label="$t('tab.history')" />
       <div
         class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-x-hidden overflow-y-scroll max-h-96"
       >