lighten up by dynamically loading logged-in pages and non-immideate components

src/App.js

@@ -12,7 +12,6 @@ import MobileNav from './components/mobile_nav/mobile_nav.vue'
 import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
-import ShoutPanel from './components/shout_panel/shout_panel.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
 import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
 import UserPanel from './components/user_panel/user_panel.vue'
@@ -46,7 +45,9 @@ export default {
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
-    ShoutPanel,
+    ShoutPanel: defineAsyncComponent(
+      () => import('src/components/shout_panel/shout_panel.vue'),
+    ),
     MediaModal,
     SideDrawer,
     MobilePostStatusButton,

src/boot/routes.js

@@ -1,34 +1,17 @@
-import About from 'components/about/about.vue'
-import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
-import AuthForm from 'components/auth_form/auth_form.js'
-import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue'
-import BubbleTimeline from 'components/bubble_timeline/bubble_timeline.vue'
-import Chat from 'components/chat/chat.vue'
-import ChatList from 'components/chat_list/chat_list.vue'
-import ConversationPage from 'components/conversation-page/conversation-page.vue'
-import DMs from 'components/dm_timeline/dm_timeline.vue'
-import Drafts from 'components/drafts/drafts.vue'
-import FollowRequests from 'components/follow_requests/follow_requests.vue'
-import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
-import Lists from 'components/lists/lists.vue'
-import ListsEdit from 'components/lists_edit/lists_edit.vue'
-import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
-import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
-import PasswordReset from 'components/password_reset/password_reset.vue'
-import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
-import PublicTimeline from 'components/public_timeline/public_timeline.vue'
-import Registration from 'components/registration/registration.vue'
-import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
-import Search from 'components/search/search.vue'
-import ShoutPanel from 'components/shout_panel/shout_panel.vue'
-import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
-import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 import { defineAsyncComponent } from 'vue'
 
+import About from 'src/components/about/about.vue'
+import BookmarkTimeline from 'src/components/bookmark_timeline/bookmark_timeline.vue'
+import BubbleTimeline from 'src/components/bubble_timeline/bubble_timeline.vue'
+import ConversationPage from 'src/components/conversation-page/conversation-page.vue'
+import DMs from 'src/components/dm_timeline/dm_timeline.vue'
+import FriendsTimeline from 'src/components/friends_timeline/friends_timeline.vue'
 import NavPanel from 'src/components/nav_panel/nav_panel.vue'
-import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
+import PublicAndExternalTimeline from 'src/components/public_and_external_timeline/public_and_external_timeline.vue'
-import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
+import PublicTimeline from 'src/components/public_timeline/public_timeline.vue'
-import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
+import QuotesTimeline from 'src/components/quotes_timeline/quotes_timeline.vue'
+import RemoteUserResolver from 'src/components/remote_user_resolver/remote_user_resolver.vue'
+import TagTimeline from 'src/components/tag_timeline/tag_timeline.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -116,22 +99,34 @@ export default (store) => {
       component: DMs,
       beforeEnter: validateAuthenticatedRoute,
     },
-    { name: 'registration', path: '/registration', component: Registration },
+    {
+      name: 'registration',
+      path: '/registration',
+      component: defineAsyncComponent(
+        () => import('src/components/registration/registration.vue'),
+      ),
+    },
     {
       name: 'password-reset',
       path: '/password-reset',
-      component: PasswordReset,
+      component: defineAsyncComponent(
+        () => import('src/components/password_reset/password_reset.vue'),
+      ),
       props: true,
     },
     {
       name: 'registration-token',
       path: '/registration/:token',
-      component: Registration,
+      component: defineAsyncComponent(
+        () => import('src/components/registration/registration.vue'),
+      ),
     },
     {
       name: 'friend-requests',
       path: '/friend-requests',
-      component: FollowRequests,
+      component: defineAsyncComponent(
+        () => import('src/components/follow_requests/follow_requests.vue'),
+      ),
       beforeEnter: validateAuthenticatedRoute,
     },
     {
@@ -143,38 +138,61 @@ export default (store) => {
       props: () => ({ disableTeleport: true }),
       beforeEnter: validateAuthenticatedRoute,
     },
-    { name: 'login', path: '/login', component: AuthForm },
+    {
+      name: 'login',
+      path: '/login',
+      component: defineAsyncComponent(
+        () => import('src/components/auth_form/auth_form.js'),
+      ),
+    },
     {
       name: 'shout-panel',
       path: '/shout-panel',
-      component: ShoutPanel,
+      component: defineAsyncComponent(
+        () => import('src/components/shout_panel/shout_panel.vue'),
+      ),
       props: () => ({ floating: false }),
     },
     {
       name: 'oauth-callback',
       path: '/oauth-callback',
-      component: OAuthCallback,
+      component: defineAsyncComponent(
+        () => import('src/components/oauth_callback/oauth_callback.vue'),
+      ),
       props: (route) => ({ code: route.query.code }),
     },
     {
       name: 'search',
       path: '/search',
-      component: Search,
+      component: defineAsyncComponent(
+        () => import('src/components/search/search.vue'),
+      ),
       props: (route) => ({ query: route.query.query }),
     },
     {
       name: 'who-to-follow',
       path: '/who-to-follow',
-      component: WhoToFollow,
+      component: defineAsyncComponent(
+        () => import('src/components/who_to_follow/who_to_follow.vue'),
+      ),
       beforeEnter: validateAuthenticatedRoute,
     },
     { name: 'about', path: '/about', component: About },
     {
       name: 'announcements',
       path: '/announcements',
-      component: AnnouncementsPage,
+      component: defineAsyncComponent(
+        () =>
+          import('src/components/announcements_page/announcements_page.vue'),
+      ),
+    },
+    {
+      name: 'drafts',
+      path: '/drafts',
+      component: defineAsyncComponent(
+        () => import('src/components/drafts/drafts.vue'),
+      ),
     },
-    { name: 'drafts', path: '/drafts', component: Drafts },
     {
       name: 'user-profile',
       path: '/users/:name',
@@ -189,10 +207,34 @@ export default (store) => {
         () => import('src/components/user_profile/user_profile.vue'),
       ),
     },
-    { name: 'lists', path: '/lists', component: Lists },
+    {
-    { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
+      name: 'lists',
-    { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
+      path: '/lists',
-    { name: 'lists-new', path: '/lists/new', component: ListsEdit },
+      component: defineAsyncComponent(
+        () => import('src/components/lists/lists.vue'),
+      ),
+    },
+    {
+      name: 'lists-timeline',
+      path: '/lists/:id',
+      component: defineAsyncComponent(
+        () => import('src/components/lists_timeline/lists_timeline.vue'),
+      ),
+    },
+    {
+      name: 'lists-edit',
+      path: '/lists/:id/edit',
+      component: defineAsyncComponent(
+        () => import('src/components/lists_edit/lists_edit.vue'),
+      ),
+    },
+    {
+      name: 'lists-new',
+      path: '/lists/new',
+      component: defineAsyncComponent(
+        () => import('src/components/lists_edit/lists_edit.vue'),
+      ),
+    },
     {
       name: 'edit-navigation',
       path: '/nav-edit',
@@ -203,12 +245,19 @@ export default (store) => {
     {
       name: 'bookmark-folders',
       path: '/bookmark_folders',
-      component: BookmarkFolders,
+      component: defineAsyncComponent(
+        () => import('src/components/bookmark_folders/bookmark_folders.vue'),
+      ),
     },
     {
       name: 'bookmark-folder-new',
       path: '/bookmarks/new-folder',
-      component: BookmarkFolderEdit,
+      component: defineAsyncComponent(
+        () =>
+          import(
+            'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
+          ),
+      ),
     },
     {
       name: 'bookmark-folder',
@@ -218,7 +267,12 @@ export default (store) => {
     {
       name: 'bookmark-folder-edit',
       path: '/bookmarks/:id/edit',
-      component: BookmarkFolderEdit,
+      component: defineAsyncComponent(
+        () =>
+          import(
+            'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
+          ),
+      ),
     },
   ]
 
@@ -227,14 +281,18 @@ export default (store) => {
       {
         name: 'chat',
         path: '/users/:username/chats/:recipient_id',
-        component: Chat,
+        component: defineAsyncComponent(
+          () => import('src/components/chat/chat.vue'),
+        ),
         meta: { dontScroll: false },
         beforeEnter: validateAuthenticatedRoute,
       },
       {
         name: 'chats',
         path: '/users/:username/chats',
-        component: ChatList,
+        component: defineAsyncComponent(
+          () => import('src/components/chat_list/chat_list.vue'),
+        ),
         meta: { dontScroll: false },
         beforeEnter: validateAuthenticatedRoute,
       },

src/components/draft/draft.js

@@ -1,9 +1,8 @@
 import { cloneDeep } from 'lodash'
+import { defineAsyncComponent } from 'vue'
 
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
-import EditStatusForm from 'src/components/edit_status_form/edit_status_form.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
-import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
@@ -15,8 +14,12 @@ library.add(faPollH)
 
 const Draft = {
   components: {
-    PostStatusForm,
+    PostStatusForm: defineAsyncComponent(
-    EditStatusForm,
+      () => import('src/components/post_status_form/post_status_form.vue'),
+    ),
+    EditStatusForm: defineAsyncComponent(
+      () => import('src/components/edit_status_form/edit_status_form.vue'),
+    ),
     ConfirmModal,
     StatusContent,
     Gallery,

src/components/edit_status_modal/edit_status_modal.js

@@ -1,13 +1,15 @@
 import get from 'lodash/get'
+import { defineAsyncComponent } from 'vue'
 
-import EditStatusForm from '../edit_status_form/edit_status_form.vue'
 import Modal from '../modal/modal.vue'
 
 import { useEditStatusStore } from 'src/stores/editStatus.js'
 
 const EditStatusModal = {
   components: {
-    EditStatusForm,
+    EditStatusForm: defineAsyncComponent(
+      () => import('src/components/edit_status_form/edit_status_form.vue'),
+    ),
     Modal,
   },
   data() {

src/components/post_status_modal/post_status_modal.js

@@ -1,13 +1,15 @@
 import get from 'lodash/get'
+import { defineAsyncComponent } from 'vue'
 
 import Modal from '../modal/modal.vue'
-import PostStatusForm from '../post_status_form/post_status_form.vue'
 
 import { usePostStatusStore } from 'src/stores/post_status.js'
 
 const PostStatusModal = {
   components: {
-    PostStatusForm,
+    PostStatusForm: defineAsyncComponent(
+      () => import('src/components/post_status_form/post_status_form.vue'),
+    ),
     Modal,
   },
   data() {

src/components/status/status.js

@@ -1,4 +1,5 @@
 import { unescape as ldUnescape, uniqBy } from 'lodash'
+import { defineAsyncComponent } from 'vue'
 
 import MentionLink from 'src/components/mention_link/mention_link.vue'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
@@ -11,7 +12,6 @@ import {
 } from '../../services/user_highlighter/user_highlighter.js'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
-import PostStatusForm from '../post_status_form/post_status_form.vue'
 import Quote from '../quote/quote.vue'
 import StatusContent from '../status_content/status_content.vue'
 import StatusPopover from '../status_popover/status_popover.vue'
@@ -117,7 +117,9 @@ const controlledOrUncontrolledSet = (obj, name, val) => {
 const Status = {
   name: 'Status',
   components: {
-    PostStatusForm,
+    PostStatusForm: defineAsyncComponent(
+      () => import('src/components/post_status_form/post_status_form.vue'),
+    ),
     UserAvatar,
     AvatarList,
     Timeago,

src/components/user_panel/user_panel.js

@@ -1,9 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import { mapState } from 'vuex'
 
-import AuthForm from 'src/components/auth_form/auth_form.js'
-import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
-
 const UserPanel = {
   computed: {
     signedIn() {
@@ -12,8 +9,12 @@ const UserPanel = {
     ...mapState({ user: (state) => state.users.currentUser }),
   },
   components: {
-    AuthForm,
+    AuthForm: defineAsyncComponent(
-    PostStatusForm,
+      () => import('src/components/auth_form/auth_form.js'),
+    ),
+    PostStatusForm: defineAsyncComponent(
+      () => import('src/components/post_status_form/post_status_form.vue'),
+    ),
     UserCard: defineAsyncComponent(
       () => import('src/components/user_card/user_card.vue'),
     ),