From f7569697f02c52746c14c054acf389427eba69fa Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Wed, 6 Nov 2024 00:56:37 +0100
Subject: [PATCH] chore(ui): split the bundle for `BuilderApp`

I noticed that the builder load **many** components on the loading,
which hurts a lot performances.

Many of them could be delayed to be loaded only when visible (like on
`v-if="true"`) using `defineAsyncComponent`).
---
 src/ui/src/builder/BuilderApp.vue         | 39 ++++++++++++++++-------
 src/ui/src/builder/BuilderFieldsTools.vue |  7 ++--
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index 391cdc854..787e4db27 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -93,21 +93,38 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onMounted } from "vue";
+import { computed, defineAsyncComponent, inject, onMounted } from "vue";
 import { useDragDropComponent } from "./useDragDropComponent";
 import { useComponentActions } from "./useComponentActions";
-import BuilderHeader from "./BuilderHeader.vue";
-import BuilderSettings from "./BuilderSettings.vue";
-import BuilderSidebar from "./BuilderSidebar.vue";
-import ComponentRenderer from "@/renderer/ComponentRenderer.vue";
-import BuilderComponentShortcuts from "./BuilderComponentShortcuts.vue";
 import injectionKeys from "../injectionKeys";
-import BuilderInstanceTracker from "./BuilderInstanceTracker.vue";
-import BuilderInsertionOverlay from "./BuilderInsertionOverlay.vue";
-import BuilderInsertionLabel from "./BuilderInsertionLabel.vue";
-import BuilderCodePanel from "./BuilderCodePanel.vue";
-import BuilderLogPanel from "./BuilderLogPanel.vue";
 import { isPlatformMac } from "../core/detectPlatform";
+import BuilderHeader from "./BuilderHeader.vue";
+import BuilderComponentShortcuts from "./BuilderComponentShortcuts.vue";
+
+const BuilderSettings = defineAsyncComponent(
+	() => import("./BuilderSettings.vue"),
+);
+const BuilderSidebar = defineAsyncComponent(
+	() => import("./BuilderSidebar.vue"),
+);
+const ComponentRenderer = defineAsyncComponent(
+	() => import("@/renderer/ComponentRenderer.vue"),
+);
+const BuilderInstanceTracker = defineAsyncComponent(
+	() => import("./BuilderInstanceTracker.vue"),
+);
+const BuilderInsertionOverlay = defineAsyncComponent(
+	() => import("./BuilderInsertionOverlay.vue"),
+);
+const BuilderInsertionLabel = defineAsyncComponent(
+	() => import("./BuilderInsertionLabel.vue"),
+);
+const BuilderCodePanel = defineAsyncComponent(
+	() => import("./BuilderCodePanel.vue"),
+);
+const BuilderLogPanel = defineAsyncComponent(
+	() => import("./BuilderLogPanel.vue"),
+);
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderFieldsTools.vue b/src/ui/src/builder/BuilderFieldsTools.vue
index 0f1be6520..d1d8bb4f9 100644
--- a/src/ui/src/builder/BuilderFieldsTools.vue
+++ b/src/ui/src/builder/BuilderFieldsTools.vue
@@ -71,7 +71,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, inject, computed, ref } from "vue";
+import { toRefs, inject, computed, ref, defineAsyncComponent } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
@@ -80,9 +80,12 @@ import BuilderModal, { ModalAction } from "./BuilderModal.vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
 import WdsDropdownInput from "@/wds/WdsDropdownInput.vue";
-import BuilderEmbeddedCodeEditor from "./BuilderEmbeddedCodeEditor.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
 
+const BuilderEmbeddedCodeEditor = defineAsyncComponent(
+	() => import("./BuilderEmbeddedCodeEditor.vue"),
+);
+
 type FunctionTool = {
 	type: "function";
 	description: string;