[6.x] More code splitting

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,

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

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

resources/js/bootstrap/statamic.js

@@ -16,10 +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';
 import FieldActions from '../components/field-actions/FieldActions.js';
@@ -129,17 +125,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 +149,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(),

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'),

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'],

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',

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,

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: {

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,