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"
       >

src/components/PageHistory.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DomainFactory } from "@/lib/factory";
-import CoolDomain from "./CoolDomain.vue";
+import { defineAsyncComponent } from "vue";
+const CoolDomain = defineAsyncComponent(() => import("./CoolDomain.vue"));
 
 defineProps<{ factory: DomainFactory }>();
 </script>

src/components/PageInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import type { DomainFactory } from "@/lib/factory";
-import CoolDomain from "./CoolDomain.vue";
+const CoolDomain = defineAsyncComponent(() => import("./CoolDomain.vue"));
 import type { Domain } from "@/types";
 import { isDomainAvailable } from "@/lib/whois";
 

src/components/PageRandom.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, onBeforeMount, watch } from "vue";
+import { ref, onBeforeMount, watch, defineAsyncComponent } from "vue";
 import { isDomainAvailable } from "@/lib/whois";
 import type { DomainFactory } from "@/lib/factory";
-import CoolDomain from "./CoolDomain.vue";
+const CoolDomain = defineAsyncComponent(() => import("./CoolDomain.vue"));
 import type { Domain } from "@/types";
 import { useI18n } from "vue-i18n";
 

src/lib/factory.ts

@@ -1,11 +1,9 @@
-import rawTldList from "@/data/tld.txt?raw";
-import englishWords from "@/data/english.txt?raw";
-import frenchWords from "@/data/french.txt?raw";
+const rawTldList = () => import("@/data/tld.txt?raw");
+const englishWords = () => import("@/data/english.txt?raw");
+const frenchWords = () => import("@/data/french.txt?raw");
 import { randomElement, shuffled } from "./random";
 import type { Domain } from "@/types";
 
-const TLD_LIST: string[] = rawTldList.trim().split("\n");
-
 export class DomainFactory {
   error: string | null = null;
   words: Record<string, string[]> = {};
@@ -13,10 +11,20 @@ export class DomainFactory {
   history: Domain[] = [];
   tldList: string[] = [];
 
-  init() {
-    this.words.fr = this.initWords(frenchWords);
-    this.words.en = this.initWords(englishWords);
-    this.tldList = TLD_LIST;
+  async init(lang: string | null = null) {
+    if (lang && !this.words[lang]) {
+      switch (lang) {
+        case "en":
+          this.words.en = this.initWords((await englishWords()).default);
+          break;
+        case "fr":
+          this.words.fr = this.initWords((await frenchWords()).default);
+          break;
+      }
+    }
+    if (this.tldList.length == 0) {
+      this.tldList = (await rawTldList()).default.trim().split("\n");
+    }
   }
 
   escapeWord(word: string): string {
@@ -64,6 +72,8 @@ export class DomainFactory {
 
   next(lang: string): Promise<Domain> {
     return new Promise((resolve, reject) => {
+      this.init(lang)
+        .then(() => {
           let k = 10000;
           while (k > 0) {
             k--;
@@ -78,6 +88,8 @@ export class DomainFactory {
           }
           this.error = "Could not generate a valid domain";
           reject(new Error(this.error));
+        })
+        .catch(reject);
     });
   }
 
@@ -97,6 +109,8 @@ export class DomainFactory {
   allFromWord(word: string): Promise<Domain[]> {
     const escapedWord = this.escapeWord(word.replace(/ /gm, "-"));
     return new Promise((resolve, reject) => {
+      this.init()
+        .then(() => {
           const domains = [];
           for (const tld of shuffled(this.tldList.slice())) {
             const tldEscaped: string = tld.replace(".", "");
@@ -113,6 +127,8 @@ export class DomainFactory {
             resolve(domains);
           }
           reject(new Error("Could not generate a valid domain"));
+        })
+        .catch(reject);
     });
   }
 }

src/main.ts

@@ -1,8 +1,8 @@
-import { createApp } from "vue";
+import { createApp, defineAsyncComponent } from "vue";
 import { createI18n } from "vue-i18n";
-import App from "./App.vue";
-import en from "./i18n/en.json";
-import fr from "./i18n/fr.json";
+const App = defineAsyncComponent(() => import("./App.vue"));
+const en = await import("./i18n/en.json");
+const fr = await import("./i18n/fr.json");
 
 function getLang() {
   return document.location.hash === "#french" ? "fr" : "en";