Merge pull request #616 from madeindjs/split-bundle

chore(ui): split the bundle for `BuilderApp` - WF-96

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);

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;