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,20 +72,24 @@ export class DomainFactory {
 
   next(lang: string): Promise<Domain> {
     return new Promise((resolve, reject) => {
-      let k = 10000;
-      while (k > 0) {
-        k--;
-        const word = this.randomWord(lang);
-        const domain = this.randomDomain(word);
-        if (domain) {
-          const output = this.newDomain(domain);
-          this.history.push(output);
-          resolve(output);
-          return;
-        }
-      }
-      this.error = "Could not generate a valid domain";
-      reject(new Error(this.error));
+      this.init(lang)
+        .then(() => {
+          let k = 10000;
+          while (k > 0) {
+            k--;
+            const word = this.randomWord(lang);
+            const domain = this.randomDomain(word);
+            if (domain) {
+              const output = this.newDomain(domain);
+              this.history.push(output);
+              resolve(output);
+              return;
+            }
+          }
+          this.error = "Could not generate a valid domain";
+          reject(new Error(this.error));
+        })
+        .catch(reject);
     });
   }
 
@@ -97,22 +109,26 @@ export class DomainFactory {
   allFromWord(word: string): Promise<Domain[]> {
     const escapedWord = this.escapeWord(word.replace(/ /gm, "-"));
     return new Promise((resolve, reject) => {
-      const domains = [];
-      for (const tld of shuffled(this.tldList.slice())) {
-        const tldEscaped: string = tld.replace(".", "");
-        if (escapedWord.endsWith(tldEscaped) && escapedWord.length >= tldEscaped.length + 2) {
-          const domain = `${escapedWord.substring(0, escapedWord.length - tldEscaped.length)}.${tld}`;
-          if (!domain.includes("-.")) {
-            const output = this.newDomain(domain);
-            this.history.push(output);
-            domains.push(output);
+      this.init()
+        .then(() => {
+          const domains = [];
+          for (const tld of shuffled(this.tldList.slice())) {
+            const tldEscaped: string = tld.replace(".", "");
+            if (escapedWord.endsWith(tldEscaped) && escapedWord.length >= tldEscaped.length + 2) {
+              const domain = `${escapedWord.substring(0, escapedWord.length - tldEscaped.length)}.${tld}`;
+              if (!domain.includes("-.")) {
+                const output = this.newDomain(domain);
+                this.history.push(output);
+                domains.push(output);
+              }
+            }
           }
-        }
-      }
-      if (domains.length) {
-        resolve(domains);
-      }
-      reject(new Error("Could not generate a valid domain"));
+          if (domains.length) {
+            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";