From 5b35be3f05d91ce0c2c11bbf75fc3f33dcb0069b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Sun, 2 Mar 2025 14:19:38 -0500
Subject: [PATCH 1/5] Code split vue-toasted

---
 resources/js/bootstrap/statamic.js | 16 +----------
 resources/js/components/Toasts.js  | 43 ++++++++++++++++++++++++------
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/resources/js/bootstrap/statamic.js b/resources/js/bootstrap/statamic.js
index fc55ffca32..1e2f927637 100644
--- a/resources/js/bootstrap/statamic.js
+++ b/resources/js/bootstrap/statamic.js
@@ -16,9 +16,6 @@ import 'floating-vue/dist/style.css';
 import VCalendar from 'v-calendar';
 import 'v-calendar/style.css';
 import Toasts from '../components/Toasts';
-import Toasted from '@hoppscotch/vue-toasted';
-import { useToasted } from '@hoppscotch/vue-toasted';
-import '@hoppscotch/vue-toasted/style.css';
 import 'vue-final-modal/style.css';
 import PortalVue from 'portal-vue';
 import Keys from '../components/keys/Keys';
@@ -129,17 +126,6 @@ export default {
         this.$app.use(VueClickAway);
         this.$app.use(FloatingVue, { disposeTimeout: 30000, distance: 10 });
         this.$app.use(VCalendar);
-        this.$app.use(Toasted, {
-            position: 'bottom-left',
-            duration: 3500,
-            theme: 'statamic',
-            action: {
-                text: '×',
-                onClick: (e, toastObject) => {
-                    toastObject.goAway(0);
-                },
-            },
-        });
 
         const portals = markRaw(new Portals());
 
@@ -164,7 +150,7 @@ export default {
             $portals: portals,
             $stacks: new Stacks(portals),
             $hooks: new Hooks(),
-            $toast: new Toasts(useToasted()),
+            $toast: new Toasts(this.$app),
             $bard: new Bard(),
             $reveal: new Reveal(),
             $echo: new Echo(),
diff --git a/resources/js/components/Toasts.js b/resources/js/components/Toasts.js
index aae10c1de4..832dbc8cb7 100644
--- a/resources/js/components/Toasts.js
+++ b/resources/js/components/Toasts.js
@@ -1,6 +1,9 @@
 export default class Toasts {
-    constructor(toasted) {
-        this.toasted = toasted;
+    #app;
+    #plugin;
+
+    constructor(app) {
+        this.#app = app;
     }
 
     registerInterceptor(axios) {
@@ -35,8 +38,32 @@ export default class Toasts {
         return opts;
     }
 
-    success(message, opts) {
-        this.toasted.success(
+    async #toasted() {
+        return new Promise(async (resolve) => {
+            if (!this.#plugin) {
+                const { default: Toasted, useToasted } = await import('@hoppscotch/vue-toasted');
+                import('@hoppscotch/vue-toasted/style.css');
+
+                this.#app.use(Toasted, {
+                    position: 'bottom-left',
+                    duration: 3500,
+                    theme: 'statamic',
+                    action: {
+                        text: '×',
+                        onClick: (e, toastObject) => {
+                            toastObject.goAway(0);
+                        },
+                    },
+                });
+                this.#plugin = useToasted();
+            }
+
+            resolve(this.#plugin);
+        });
+    }
+
+    async success(message, opts) {
+        (await this.#toasted()).success(
             message,
             this.#normalizeToastOptions({
                 iconPack: 'callback',
@@ -50,8 +77,8 @@ export default class Toasts {
         );
     }
 
-    info(message, opts) {
-        this.toasted.show(
+    async info(message, opts) {
+        (await this.#toasted()).show(
             message,
             this.#normalizeToastOptions({
                 iconPack: 'callback',
@@ -65,8 +92,8 @@ export default class Toasts {
         );
     }
 
-    error(message, opts) {
-        this.toasted.error(
+    async error(message, opts) {
+        (await this.#toasted()).error(
             message,
             this.#normalizeToastOptions({
                 iconPack: 'callback',

From 9393670c7f32f68c816e70f857ef8cc55a752195 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Sun, 2 Mar 2025 14:36:44 -0500
Subject: [PATCH 2/5] Code split vue-final-modal

---
 resources/js/bootstrap/components.js | 7 +++++--
 resources/js/bootstrap/statamic.js   | 1 -
 resources/js/components/Modal.vue    | 1 +
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index d2d5dbadeb..c988125856 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -52,7 +52,6 @@ import CreateEntryButton from '../components/entries/CreateEntryButton.vue';
 import Popover from '../components/Popover.vue';
 import Portal from '../components/portals/Portal.vue';
 import PermissionTree from '../components/roles/PermissionTree.vue';
-import Modal from '../components/Modal.vue';
 import ConfirmationModal from '../components/modals/ConfirmationModal.vue';
 import FavoriteCreator from '../components/FavoriteCreator.vue';
 import KeyboardShortcutsModal from '../components/modals/KeyboardShortcutsModal.vue';
@@ -62,6 +61,7 @@ import Stack from '../components/stacks/Stack.vue';
 import StackTest from '../components/stacks/StackTest.vue';
 import CodeBlock from '../components/CodeBlock.vue';
 import BlueprintResetter from '../components/blueprints/BlueprintResetter.vue';
+import { defineAsyncComponent } from 'vue';
 
 export default function registerGlobalComponents(app) {
     // Core
@@ -136,7 +136,10 @@ export default function registerGlobalComponents(app) {
     app.component('role-permission-tree', PermissionTree);
 
     // Modals
-    app.component('modal', Modal);
+    app.component(
+        'modal',
+        defineAsyncComponent(() => import('../components/Modal.vue')),
+    );
     app.component('confirmation-modal', ConfirmationModal);
     app.component('favorite-creator', FavoriteCreator);
     app.component('keyboard-shortcuts-modal', KeyboardShortcutsModal);
diff --git a/resources/js/bootstrap/statamic.js b/resources/js/bootstrap/statamic.js
index 1e2f927637..2a8032442d 100644
--- a/resources/js/bootstrap/statamic.js
+++ b/resources/js/bootstrap/statamic.js
@@ -16,7 +16,6 @@ import 'floating-vue/dist/style.css';
 import VCalendar from 'v-calendar';
 import 'v-calendar/style.css';
 import Toasts from '../components/Toasts';
-import 'vue-final-modal/style.css';
 import PortalVue from 'portal-vue';
 import Keys from '../components/keys/Keys';
 import FieldActions from '../components/field-actions/FieldActions.js';
diff --git a/resources/js/components/Modal.vue b/resources/js/components/Modal.vue
index 36635b7a86..4aac0143e1 100644
--- a/resources/js/components/Modal.vue
+++ b/resources/js/components/Modal.vue
@@ -11,6 +11,7 @@
 <script>
 import uniqid from 'uniqid';
 import { VueFinalModal } from 'vue-final-modal';
+import 'vue-final-modal/style.css';
 
 export default {
     emits: ['opened', 'closed'],

From 18980de5cfbb2075aeab55b56cd3ec747f19e661 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Sun, 2 Mar 2025 14:37:15 -0500
Subject: [PATCH 3/5] Code split he-tree

---
 resources/js/bootstrap/App.vue                           | 4 ++--
 resources/js/components/collections/View.vue             | 4 ++--
 resources/js/components/inputs/relationship/Selector.vue | 4 ++--
 resources/js/components/navigation/View.vue              | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/bootstrap/App.vue b/resources/js/bootstrap/App.vue
index b2cc86c2f0..b77f2b909d 100644
--- a/resources/js/bootstrap/App.vue
+++ b/resources/js/bootstrap/App.vue
@@ -41,10 +41,10 @@ import TaxonomyEditForm from '../components/taxonomies/EditForm.vue';
 import TaxonomyBlueprintListing from '../components/taxonomies/BlueprintListing.vue';
 import AssetContainerCreateForm from '../components/asset-containers/CreateForm.vue';
 import AssetContainerEditForm from '../components/asset-containers/EditForm.vue';
-import NavBuilder from '../components/nav/Builder.vue';
 import Updater from '../components/updater/Updater.vue';
 import PortalTargets from '../components/portals/PortalTargets.vue';
 import SitesEditForm from '../components/sites/EditForm.vue';
+import { defineAsyncComponent } from 'vue';
 
 export default {
     components: {
@@ -90,7 +90,7 @@ export default {
         TaxonomyBlueprintListing,
         AssetContainerCreateForm,
         AssetContainerEditForm,
-        NavBuilder,
+        NavBuilder: defineAsyncComponent(() => import('../components/nav/Builder.vue')),
         Updater,
         PortalTargets,
         SitesEditForm,
diff --git a/resources/js/components/collections/View.vue b/resources/js/components/collections/View.vue
index 76cdd1fa06..9942300d90 100644
--- a/resources/js/components/collections/View.vue
+++ b/resources/js/components/collections/View.vue
@@ -182,17 +182,17 @@
 </template>
 
 <script>
-import PageTree from '../structures/PageTree.vue';
 import DeleteEntryConfirmation from './DeleteEntryConfirmation.vue';
 import DeleteLocalizationConfirmation from './DeleteLocalizationConfirmation.vue';
 import SiteSelector from '../SiteSelector.vue';
 import HasActions from '../publish/HasActions';
+import { defineAsyncComponent } from 'vue';
 
 export default {
     mixins: [HasActions],
 
     components: {
-        PageTree,
+        PageTree: defineAsyncComponent(() => import('../structures/PageTree.vue')),
         DeleteEntryConfirmation,
         DeleteLocalizationConfirmation,
         SiteSelector,
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 069d677d1c..a3fc47f880 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -235,13 +235,13 @@
 
 <script>
 import HasFilters from '../../data-list/HasFilters';
-import PageTree from '../../structures/PageTree.vue';
+import { defineAsyncComponent } from 'vue';
 
 export default {
     mixins: [HasFilters],
 
     components: {
-        PageTree,
+        PageTree: defineAsyncComponent(() => import('../../structures/PageTree.vue')),
     },
 
     props: {
diff --git a/resources/js/components/navigation/View.vue b/resources/js/components/navigation/View.vue
index 1aa75d397a..87a5fb80e2 100644
--- a/resources/js/components/navigation/View.vue
+++ b/resources/js/components/navigation/View.vue
@@ -230,16 +230,16 @@
 </template>
 
 <script>
-import PageTree from '../structures/PageTree.vue';
 import PageEditor from '../structures/PageEditor.vue';
 import PageSelector from '../structures/PageSelector.vue';
 import RemovePageConfirmation from './RemovePageConfirmation.vue';
 import SiteSelector from '../SiteSelector.vue';
 import uniqid from 'uniqid';
+import { defineAsyncComponent } from 'vue';
 
 export default {
     components: {
-        PageTree,
+        PageTree: defineAsyncComponent(() => import('../structures/PageTree.vue')),
         PageEditor,
         PageSelector,
         RemovePageConfirmation,

From c280caaea3e1701040aab1468e2a88bb60b1eef5 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Sun, 2 Mar 2025 15:07:10 -0500
Subject: [PATCH 4/5] Code split imask

---
 resources/js/bootstrap/fieldtypes.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/resources/js/bootstrap/fieldtypes.js b/resources/js/bootstrap/fieldtypes.js
index 4b3a56a39d..d4e853c4d9 100644
--- a/resources/js/bootstrap/fieldtypes.js
+++ b/resources/js/bootstrap/fieldtypes.js
@@ -53,7 +53,6 @@ import TableFieldtype from '../components/fieldtypes/TableFieldtype.vue';
 import TagsFieldtype from '../components/fieldtypes/TagsFieldtype.vue';
 import TagsIndexFieldtype from '../components/fieldtypes/TagsIndexFieldtype.vue';
 import TemplateFolderFieldtype from '../components/fieldtypes/TemplateFolderFieldtype.vue';
-import TimeFieldtype from '../components/fieldtypes/TimeFieldtype.vue';
 import ToggleFieldtype from '../components/fieldtypes/ToggleFieldtype.vue';
 import ToggleIndexFieldtype from '../components/fieldtypes/ToggleIndexFieldtype.vue';
 import WidthFieldtype from '../components/fieldtypes/WidthFieldtype.vue';
@@ -131,7 +130,10 @@ export default function registerFieldtypes(app) {
     app.component('tags-fieldtype-index', TagsIndexFieldtype);
     app.component('taggable-fieldtype-index', TagsIndexFieldtype);
     app.component('template_folder-fieldtype', TemplateFolderFieldtype);
-    app.component('time-fieldtype', TimeFieldtype);
+    app.component(
+        'time-fieldtype',
+        defineAsyncComponent(() => import('../components/fieldtypes/TimeFieldtype.vue')),
+    );
     app.component('toggle-fieldtype', ToggleFieldtype);
     app.component('toggle-fieldtype-index', ToggleIndexFieldtype);
     app.component('width-fieldtype', WidthFieldtype);

From 19350ce9b1a28ac477fa81f9b1656aa8951e6d4d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Sun, 2 Mar 2025 15:07:38 -0500
Subject: [PATCH 5/5] Code split Echo and Pusher

---
 resources/js/components/Echo.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/Echo.js b/resources/js/components/Echo.js
index 21bb1e64af..3d4db10a9f 100644
--- a/resources/js/components/Echo.js
+++ b/resources/js/components/Echo.js
@@ -1,7 +1,3 @@
-import LaravelEcho from 'laravel-echo';
-import Pusher from 'pusher-js';
-window.Pusher = Pusher;
-
 class Echo {
     constructor() {
         this.configCallbacks = [];
@@ -16,7 +12,14 @@ class Echo {
         this.bootedCallbacks.push(callback);
     }
 
-    start() {
+    async start() {
+        const [{ default: LaravelEcho }, { default: Pusher }] = await Promise.all([
+            import('laravel-echo'),
+            import('pusher-js'),
+        ]);
+
+        window.Pusher = Pusher;
+
         let config = {
             ...Statamic.$config.get('broadcasting.options'),
             csrfToken: Statamic.$config.get('csrfToken'),