Load all top-level Vue components asynchronously

Author: williamjallen

resources/js/vue/app.js

@@ -14,25 +14,25 @@ import VueApolloComponents from '@vue/apollo-components';
 import { relayStylePagination } from '@apollo/client/utilities';
 import { DefaultApolloClient } from '@vue/apollo-composable';
 
-import BuildConfigure from './components/BuildConfigure';
-import BuildNotes from './components/BuildNotes';
-import BuildSummary from './components/BuildSummary';
-import BuildUpdate from './components/BuildUpdate';
-import EditProject from './components/EditProject';
-import UserHomepage from './components/UserHomepage';
-import ManageAuthTokens from './components/ManageAuthTokens.vue';
-import ManageMeasurements from './components/ManageMeasurements';
-import Monitor from './components/Monitor';
-import TestDetails from './components/TestDetails';
-import HeaderNav from './components/page-header/HeaderNav.vue';
-import ViewDynamicAnalysis from './components/ViewDynamicAnalysis.vue';
-import AllProjects from './components/AllProjects.vue';
-import SubProjectDependencies from './components/SubProjectDependencies.vue';
-import BuildTestsPage from './components/BuildTestsPage.vue';
-import ProjectSitesPage from './components/ProjectSitesPage.vue';
-import SitesIdPage from './components/SitesIdPage.vue';
-import ProjectMembersPage from './components/ProjectMembersPage.vue';
-import UsersPage from './components/UsersPage.vue';
+const BuildConfigure = Vue.defineAsyncComponent(() => import('./components/BuildConfigure'));
+const BuildNotes = Vue.defineAsyncComponent(() => import('./components/BuildNotes'));
+const BuildSummary = Vue.defineAsyncComponent(() => import('./components/BuildSummary'));
+const BuildUpdate = Vue.defineAsyncComponent(() => import('./components/BuildUpdate'));
+const EditProject = Vue.defineAsyncComponent(() => import('./components/EditProject'));
+const UserHomepage = Vue.defineAsyncComponent(() => import('./components/UserHomepage'));
+const ManageAuthTokens = Vue.defineAsyncComponent(() => import('./components/ManageAuthTokens.vue'));
+const ManageMeasurements = Vue.defineAsyncComponent(() => import('./components/ManageMeasurements'));
+const Monitor = Vue.defineAsyncComponent(() => import('./components/Monitor'));
+const TestDetails = Vue.defineAsyncComponent(() => import('./components/TestDetails'));
+const HeaderNav = Vue.defineAsyncComponent(() => import('./components/page-header/HeaderNav.vue'));
+const ViewDynamicAnalysis = Vue.defineAsyncComponent(() => import('./components/ViewDynamicAnalysis.vue'));
+const AllProjects = Vue.defineAsyncComponent(() => import('./components/AllProjects.vue'));
+const SubProjectDependencies = Vue.defineAsyncComponent(() => import('./components/SubProjectDependencies.vue'));
+const BuildTestsPage = Vue.defineAsyncComponent(() => import('./components/BuildTestsPage.vue'));
+const ProjectSitesPage = Vue.defineAsyncComponent(() => import('./components/ProjectSitesPage.vue'));
+const SitesIdPage = Vue.defineAsyncComponent(() => import('./components/SitesIdPage.vue'));
+const ProjectMembersPage = Vue.defineAsyncComponent(() => import('./components/ProjectMembersPage.vue'));
+const UsersPage = Vue.defineAsyncComponent(() => import('./components/UsersPage.vue'));
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import * as FA from '@fortawesome/fontawesome-svg-core';