From b8d9c29bac37b0976d6258099ab43635cd4b2877 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 29 Oct 2019 18:58:49 -0700
Subject: [PATCH] perf: move async modules to individual files (#1611)

---
 src/routes/_actions/copyText.js               |  2 +-
 src/routes/_actions/deleteAndRedraft.js       |  2 +-
 src/routes/_actions/instances.js              |  2 +-
 src/routes/_actions/mention.js                |  2 +-
 src/routes/_actions/report.js                 |  2 +-
 .../_actions/showShareDialogIfNecessary.js    |  2 +-
 src/routes/_actions/toggleMute.js             |  2 +-
 src/routes/_components/Nav.html               |  2 +-
 src/routes/_components/NavShortcuts.html      |  3 +-
 .../_components/compose/ComposeMediaItem.html |  2 +-
 .../compose/ComposeStickyButton.html          |  2 +-
 .../_components/compose/ComposeToolbar.html   |  3 +-
 .../_components/compose/LazyComposeBox.html   |  3 +-
 src/routes/_components/dialog/asyncDialogs.js | 49 --------------
 .../importShowAccountProfileOptionsDialog.js  |  3 +
 .../asyncDialogs/importShowComposeDialog.js   |  3 +
 .../asyncDialogs/importShowCopyDialog.js      |  3 +
 .../asyncDialogs/importShowEmojiDialog.js     |  3 +
 .../asyncDialogs/importShowMediaDialog.js     |  3 +
 .../asyncDialogs/importShowMediaEditDialog.js |  3 +
 .../asyncDialogs/importShowMuteDialog.js      |  3 +
 .../importShowPostPrivacyDialog.js            |  3 +
 .../asyncDialogs/importShowReportDialog.js    |  3 +
 .../importShowShortcutHelpDialog.js           |  3 +
 .../importShowStatusOptionsDialog.js          |  3 +
 .../importShowTextConfirmationDialog.js       |  3 +
 .../profile/AccountProfileDetails.html        |  2 +-
 .../profile/AccountProfileHeader.html         |  2 +-
 .../settings/instance/InstanceActions.html    |  2 +-
 .../instance/PushNotificationSettings.html    |  2 +-
 src/routes/_components/snackbar/snackbar.js   |  2 +-
 src/routes/_components/status/Media.html      |  2 +-
 .../_components/status/StatusToolbar.html     |  2 +-
 .../_components/timeline/LazyTimeline.html    |  3 +-
 src/routes/_components/timeline/Timeline.html | 10 ++-
 src/routes/_components/toast/toast.js         |  2 +-
 src/routes/_database/asyncDatabase.js         |  2 +-
 src/routes/_react/createEmojiMartPicker.js    |  2 +-
 .../observers/leftRightFocusObservers.js      |  2 +-
 .../observers/setupLoggedInObservers.js       |  2 +-
 src/routes/_utils/asyncModules.js             | 65 -------------------
 .../asyncModules/importArrowKeyNavigation.js  |  3 +
 .../_utils/asyncModules/importComposeBox.js   |  3 +
 .../_utils/asyncModules/importDatabase.js     |  3 +
 .../_utils/asyncModules/importEmojiMart.js    |  3 +
 src/routes/_utils/asyncModules/importList.js  |  3 +
 .../importLoggedInStoreExtensions.js          |  3 +
 .../_utils/asyncModules/importNavShortcuts.js |  3 +
 .../importNotificationVirtualListItem.js      |  3 +
 .../asyncModules/importPageLifecycle.js       |  3 +
 .../_utils/asyncModules/importSnackbar.js     |  3 +
 .../importStatusVirtualListItem.js            |  3 +
 .../asyncModules/importTesseractWorker.js     |  3 +
 .../_utils/asyncModules/importTimeline.js     |  3 +
 src/routes/_utils/asyncModules/importToast.js |  3 +
 .../_utils/asyncModules/importVirtualList.js  |  3 +
 .../asyncModules/importVirtualListStore.js    |  3 +
 src/routes/_utils/lifecycle.js                |  2 +-
 src/routes/_utils/runTesseract.js             |  2 +-
 src/routes/share.html                         |  2 +-
 60 files changed, 121 insertions(+), 149 deletions(-)
 delete mode 100644 src/routes/_components/dialog/asyncDialogs.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowAccountProfileOptionsDialog.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowComposeDialog.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowCopyDialog.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowEmojiDialog.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowMediaDialog.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowMediaEditDialog.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowMuteDialog.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowPostPrivacyDialog.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowReportDialog.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowShortcutHelpDialog.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowStatusOptionsDialog.js
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowTextConfirmationDialog.js
 delete mode 100644 src/routes/_utils/asyncModules.js
 create mode 100644 src/routes/_utils/asyncModules/importArrowKeyNavigation.js
 create mode 100644 src/routes/_utils/asyncModules/importComposeBox.js
 create mode 100644 src/routes/_utils/asyncModules/importDatabase.js
 create mode 100644 src/routes/_utils/asyncModules/importEmojiMart.js
 create mode 100644 src/routes/_utils/asyncModules/importList.js
 create mode 100644 src/routes/_utils/asyncModules/importLoggedInStoreExtensions.js
 create mode 100644 src/routes/_utils/asyncModules/importNavShortcuts.js
 create mode 100644 src/routes/_utils/asyncModules/importNotificationVirtualListItem.js
 create mode 100644 src/routes/_utils/asyncModules/importPageLifecycle.js
 create mode 100644 src/routes/_utils/asyncModules/importSnackbar.js
 create mode 100644 src/routes/_utils/asyncModules/importStatusVirtualListItem.js
 create mode 100644 src/routes/_utils/asyncModules/importTesseractWorker.js
 create mode 100644 src/routes/_utils/asyncModules/importTimeline.js
 create mode 100644 src/routes/_utils/asyncModules/importToast.js
 create mode 100644 src/routes/_utils/asyncModules/importVirtualList.js
 create mode 100644 src/routes/_utils/asyncModules/importVirtualListStore.js

diff --git a/src/routes/_actions/copyText.js b/src/routes/_actions/copyText.js
index a05d6591..96416e4c 100644
--- a/src/routes/_actions/copyText.js
+++ b/src/routes/_actions/copyText.js
@@ -1,4 +1,4 @@
-import { importShowCopyDialog } from '../_components/dialog/asyncDialogs'
+import { importShowCopyDialog } from '../_components/dialog/asyncDialogs/importShowCopyDialog.js'
 import { toast } from '../_components/toast/toast'
 
 export async function copyText (text) {
diff --git a/src/routes/_actions/deleteAndRedraft.js b/src/routes/_actions/deleteAndRedraft.js
index a66adc76..a2b4b7b4 100644
--- a/src/routes/_actions/deleteAndRedraft.js
+++ b/src/routes/_actions/deleteAndRedraft.js
@@ -1,5 +1,5 @@
 import { statusHtmlToPlainText } from '../_utils/statusHtmlToPlainText'
-import { importShowComposeDialog } from '../_components/dialog/asyncDialogs'
+import { importShowComposeDialog } from '../_components/dialog/asyncDialogs/importShowComposeDialog.js'
 import { doDeleteStatus } from './delete'
 import { store } from '../_store/store'
 
diff --git a/src/routes/_actions/instances.js b/src/routes/_actions/instances.js
index 384dbae8..5701ee11 100644
--- a/src/routes/_actions/instances.js
+++ b/src/routes/_actions/instances.js
@@ -6,7 +6,7 @@ import { goto } from '../../../__sapper__/client'
 import { cacheFirstUpdateAfter } from '../_utils/sync'
 import { getInstanceInfo } from '../_api/instance'
 import { database } from '../_database/database'
-import { importVirtualListStore } from '../_utils/asyncModules'
+import { importVirtualListStore } from '../_utils/asyncModules/importVirtualListStore.js'
 
 export function changeTheme (instanceName, newTheme) {
   const { instanceThemes } = store.get()
diff --git a/src/routes/_actions/mention.js b/src/routes/_actions/mention.js
index a3e615b1..db70522b 100644
--- a/src/routes/_actions/mention.js
+++ b/src/routes/_actions/mention.js
@@ -1,4 +1,4 @@
-import { importShowComposeDialog } from '../_components/dialog/asyncDialogs'
+import { importShowComposeDialog } from '../_components/dialog/asyncDialogs/importShowComposeDialog.js'
 import { store } from '../_store/store'
 
 export async function composeNewStatusMentioning (account) {
diff --git a/src/routes/_actions/report.js b/src/routes/_actions/report.js
index 63d7f461..65d06ac5 100644
--- a/src/routes/_actions/report.js
+++ b/src/routes/_actions/report.js
@@ -1,4 +1,4 @@
-import { importShowReportDialog } from '../_components/dialog/asyncDialogs'
+import { importShowReportDialog } from '../_components/dialog/asyncDialogs/importShowReportDialog.js'
 
 export async function reportStatusOrAccount ({ status, account }) {
   const showReportDialog = await importShowReportDialog()
diff --git a/src/routes/_actions/showShareDialogIfNecessary.js b/src/routes/_actions/showShareDialogIfNecessary.js
index ef70a745..dcf0f231 100644
--- a/src/routes/_actions/showShareDialogIfNecessary.js
+++ b/src/routes/_actions/showShareDialogIfNecessary.js
@@ -1,5 +1,5 @@
 import { store } from '../_store/store'
-import { importShowComposeDialog } from '../_components/dialog/asyncDialogs'
+import { importShowComposeDialog } from '../_components/dialog/asyncDialogs/importShowComposeDialog.js'
 
 export async function showShareDialogIfNecessary () {
   const { isUserLoggedIn, openShareDialog } = store.get()
diff --git a/src/routes/_actions/toggleMute.js b/src/routes/_actions/toggleMute.js
index 4db59300..d4387f67 100644
--- a/src/routes/_actions/toggleMute.js
+++ b/src/routes/_actions/toggleMute.js
@@ -1,4 +1,4 @@
-import { importShowMuteDialog } from '../_components/dialog/asyncDialogs'
+import { importShowMuteDialog } from '../_components/dialog/asyncDialogs/importShowMuteDialog.js'
 import { setAccountMuted } from './mute'
 
 export async function toggleMute (account, mute) {
diff --git a/src/routes/_components/Nav.html b/src/routes/_components/Nav.html
index 352896f0..4a5c037d 100644
--- a/src/routes/_components/Nav.html
+++ b/src/routes/_components/Nav.html
@@ -50,7 +50,7 @@
 </style>
 <script>
   import NavItem from './NavItem'
-  import { importNavShortcuts } from '../_utils/asyncModules'
+  import { importNavShortcuts } from '../_utils/asyncModules/importNavShortcuts.js'
   import { store } from '../_store/store'
 
   export default {
diff --git a/src/routes/_components/NavShortcuts.html b/src/routes/_components/NavShortcuts.html
index 588d4e40..730071f3 100644
--- a/src/routes/_components/NavShortcuts.html
+++ b/src/routes/_components/NavShortcuts.html
@@ -19,7 +19,8 @@
 <script>
   import Shortcut from './shortcut/Shortcut'
   import { goto } from '../../../__sapper__/client'
-  import { importShowShortcutHelpDialog, importShowComposeDialog } from './dialog/asyncDialogs'
+  import { importShowShortcutHelpDialog } from './dialog/asyncDialogs/importShowShortcutHelpDialog'
+  import { importShowComposeDialog } from './dialog/asyncDialogs/importShowComposeDialog'
   import { store } from '../_store/store'
 
   export default {
diff --git a/src/routes/_components/compose/ComposeMediaItem.html b/src/routes/_components/compose/ComposeMediaItem.html
index eed33f4b..4657e80a 100644
--- a/src/routes/_components/compose/ComposeMediaItem.html
+++ b/src/routes/_components/compose/ComposeMediaItem.html
@@ -130,7 +130,7 @@
   import { ONE_TRANSPARENT_PIXEL } from '../../_static/media'
   import { get } from '../../_utils/lodash-lite'
   import { coordsToPercent } from '../../_utils/coordsToPercent'
-  import { importShowMediaEditDialog } from '../dialog/asyncDialogs'
+  import { importShowMediaEditDialog } from '../dialog/asyncDialogs/importShowMediaEditDialog.js'
   import { throttleTimer } from '../../_utils/throttleTimer'
 
   const updateMediaInStore = throttleTimer(scheduleIdleTask)
diff --git a/src/routes/_components/compose/ComposeStickyButton.html b/src/routes/_components/compose/ComposeStickyButton.html
index 221a8405..b2ab2927 100644
--- a/src/routes/_components/compose/ComposeStickyButton.html
+++ b/src/routes/_components/compose/ComposeStickyButton.html
@@ -31,7 +31,7 @@
 <script>
   import ComposeButton from './ComposeButton.html'
   import { store } from '../../_store/store'
-  import { importShowComposeDialog } from '../dialog/asyncDialogs'
+  import { importShowComposeDialog } from '../dialog/asyncDialogs/importShowComposeDialog.js'
   import { observe } from 'svelte-extras'
   import { classname } from '../../_utils/classname'
 
diff --git a/src/routes/_components/compose/ComposeToolbar.html b/src/routes/_components/compose/ComposeToolbar.html
index 6838ed00..edb39d1e 100644
--- a/src/routes/_components/compose/ComposeToolbar.html
+++ b/src/routes/_components/compose/ComposeToolbar.html
@@ -70,7 +70,8 @@
 <script>
   import IconButton from '../IconButton.html'
   import { store } from '../../_store/store'
-  import { importShowEmojiDialog, importShowPostPrivacyDialog } from '../dialog/asyncDialogs'
+  import { importShowEmojiDialog } from '../dialog/asyncDialogs/importShowEmojiDialog'
+  import { importShowPostPrivacyDialog } from '../dialog/asyncDialogs/importShowPostPrivacyDialog'
   import { doMediaUpload } from '../../_actions/media'
   import { toggleContentWarningShown } from '../../_actions/contentWarnings'
   import { mediaAccept } from '../../_static/media'
diff --git a/src/routes/_components/compose/LazyComposeBox.html b/src/routes/_components/compose/LazyComposeBox.html
index 2d8edcf1..a0bc9388 100644
--- a/src/routes/_components/compose/LazyComposeBox.html
+++ b/src/routes/_components/compose/LazyComposeBox.html
@@ -2,7 +2,8 @@
   <svelte:component this={composeBox} {realm} {hidden} />
 {/if}
 <script>
-  import { importComposeBox, importLoggedInStoreExtensions } from '../../_utils/asyncModules'
+  import { importComposeBox } from '../../_utils/asyncModules/importComposeBox'
+  import { importLoggedInStoreExtensions } from '../../_utils/asyncModules/importLoggedInStoreExtensions'
 
   export default {
     async oncreate () {
diff --git a/src/routes/_components/dialog/asyncDialogs.js b/src/routes/_components/dialog/asyncDialogs.js
deleted file mode 100644
index 0fed6ffd..00000000
--- a/src/routes/_components/dialog/asyncDialogs.js
+++ /dev/null
@@ -1,49 +0,0 @@
-const getDefault = mod => mod.default
-
-export const importShowAccountProfileOptionsDialog = () => import(
-  /* webpackChunkName: 'showAccountProfileOptionsDialog' */ './creators/showAccountProfileOptionsDialog'
-).then(getDefault)
-
-export const importShowComposeDialog = () => import(
-  /* webpackChunkName: 'showComposeDialog' */ './creators/showComposeDialog'
-).then(getDefault)
-
-export const importShowTextConfirmationDialog = () => import(
-  /* webpackChunkName: 'showTextConfirmationDialog' */ './creators/showTextConfirmationDialog'
-).then(getDefault)
-
-export const importShowEmojiDialog = () => import(
-  /* webpackChunkName: 'showEmojiDialog' */ './creators/showEmojiDialog'
-).then(getDefault)
-
-export const importShowPostPrivacyDialog = () => import(
-  /* webpackChunkName: 'showPostPrivacyDialog' */ './creators/showPostPrivacyDialog'
-).then(getDefault)
-
-export const importShowStatusOptionsDialog = () => import(
-  /* webpackChunkName: 'showStatusOptionsDialog' */ './creators/showStatusOptionsDialog'
-).then(getDefault)
-
-export const importShowCopyDialog = () => import(
-  /* webpackChunkName: 'showCopyDialog' */ './creators/showCopyDialog'
-).then(getDefault)
-
-export const importShowShortcutHelpDialog = () => import(
-  /* webpackChunkName: 'showShortcutHelpDialog' */ './creators/showShortcutHelpDialog'
-).then(getDefault)
-
-export const importShowMediaDialog = () => import(
-  /* webpackChunkName: 'showMediaDialog' */ './creators/showMediaDialog'
-).then(getDefault)
-
-export const importShowMuteDialog = () => import(
-  /* webpackChunkName: 'showMuteDialog' */ './creators/showMuteDialog'
-).then(getDefault)
-
-export const importShowReportDialog = () => import(
-  /* webpackChunkName: 'showReportDialog' */ './creators/showReportDialog'
-).then(getDefault)
-
-export const importShowMediaEditDialog = () => import(
-  /* webpackChunkName: 'showMediaEditDialog' */ './creators/showMediaEditDialog'
-).then(getDefault)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowAccountProfileOptionsDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowAccountProfileOptionsDialog.js
new file mode 100644
index 00000000..36fb91ee
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowAccountProfileOptionsDialog.js
@@ -0,0 +1,3 @@
+export const importShowAccountProfileOptionsDialog = () => import(
+  /* webpackChunkName: 'showAccountProfileOptionsDialog' */ '../creators/showAccountProfileOptionsDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowComposeDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowComposeDialog.js
new file mode 100644
index 00000000..bf53de98
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowComposeDialog.js
@@ -0,0 +1,3 @@
+export const importShowComposeDialog = () => import(
+  /* webpackChunkName: 'showComposeDialog' */ '../creators/showComposeDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowCopyDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowCopyDialog.js
new file mode 100644
index 00000000..ad9842de
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowCopyDialog.js
@@ -0,0 +1,3 @@
+export const importShowCopyDialog = () => import(
+  /* webpackChunkName: 'showCopyDialog' */ '../creators/showCopyDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowEmojiDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowEmojiDialog.js
new file mode 100644
index 00000000..07bf1c25
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowEmojiDialog.js
@@ -0,0 +1,3 @@
+export const importShowEmojiDialog = () => import(
+  /* webpackChunkName: 'showEmojiDialog' */ '../creators/showEmojiDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowMediaDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowMediaDialog.js
new file mode 100644
index 00000000..34b18c97
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowMediaDialog.js
@@ -0,0 +1,3 @@
+export const importShowMediaDialog = () => import(
+  /* webpackChunkName: 'showMediaDialog' */ '../creators/showMediaDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowMediaEditDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowMediaEditDialog.js
new file mode 100644
index 00000000..0894c8d6
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowMediaEditDialog.js
@@ -0,0 +1,3 @@
+export const importShowMediaEditDialog = () => import(
+  /* webpackChunkName: 'showMediaEditDialog' */ '../creators/showMediaEditDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowMuteDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowMuteDialog.js
new file mode 100644
index 00000000..6712b904
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowMuteDialog.js
@@ -0,0 +1,3 @@
+export const importShowMuteDialog = () => import(
+  /* webpackChunkName: 'showMuteDialog' */ '../creators/showMuteDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowPostPrivacyDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowPostPrivacyDialog.js
new file mode 100644
index 00000000..e6ab36ab
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowPostPrivacyDialog.js
@@ -0,0 +1,3 @@
+export const importShowPostPrivacyDialog = () => import(
+  /* webpackChunkName: 'showPostPrivacyDialog' */ '../creators/showPostPrivacyDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowReportDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowReportDialog.js
new file mode 100644
index 00000000..7dbae941
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowReportDialog.js
@@ -0,0 +1,3 @@
+export const importShowReportDialog = () => import(
+  /* webpackChunkName: 'showReportDialog' */ '../creators/showReportDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowShortcutHelpDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowShortcutHelpDialog.js
new file mode 100644
index 00000000..bb0dc1e3
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowShortcutHelpDialog.js
@@ -0,0 +1,3 @@
+export const importShowShortcutHelpDialog = () => import(
+  /* webpackChunkName: 'showShortcutHelpDialog' */ '../creators/showShortcutHelpDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowStatusOptionsDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowStatusOptionsDialog.js
new file mode 100644
index 00000000..b570f7b8
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowStatusOptionsDialog.js
@@ -0,0 +1,3 @@
+export const importShowStatusOptionsDialog = () => import(
+  /* webpackChunkName: 'showStatusOptionsDialog' */ '../creators/showStatusOptionsDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowTextConfirmationDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowTextConfirmationDialog.js
new file mode 100644
index 00000000..dc3bde6f
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowTextConfirmationDialog.js
@@ -0,0 +1,3 @@
+export const importShowTextConfirmationDialog = () => import(
+  /* webpackChunkName: 'showTextConfirmationDialog' */ '../creators/showTextConfirmationDialog'
+).then(mod => mod.default)
diff --git a/src/routes/_components/profile/AccountProfileDetails.html b/src/routes/_components/profile/AccountProfileDetails.html
index e29b720b..c753373f 100644
--- a/src/routes/_components/profile/AccountProfileDetails.html
+++ b/src/routes/_components/profile/AccountProfileDetails.html
@@ -123,7 +123,7 @@
 </style>
 <script>
   import IconButton from '../IconButton.html'
-  import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs'
+  import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs/importShowAccountProfileOptionsDialog.js'
 
   const numberFormat = new Intl.NumberFormat('en-US')
 
diff --git a/src/routes/_components/profile/AccountProfileHeader.html b/src/routes/_components/profile/AccountProfileHeader.html
index 84bd5b14..433e11e2 100644
--- a/src/routes/_components/profile/AccountProfileHeader.html
+++ b/src/routes/_components/profile/AccountProfileHeader.html
@@ -124,7 +124,7 @@
   import { removeEmoji } from '../../_utils/removeEmoji'
   import { store } from '../../_store/store'
   import Label from '../Label.html'
-  import { importShowMediaDialog } from '../dialog/asyncDialogs'
+  import { importShowMediaDialog } from '../dialog/asyncDialogs/importShowMediaDialog.js'
   import { getImageNativeDimensions } from '../../_utils/getImageNativeDimensions'
 
   export default {
diff --git a/src/routes/_components/settings/instance/InstanceActions.html b/src/routes/_components/settings/instance/InstanceActions.html
index 6ffdb73e..d0b8dcde 100644
--- a/src/routes/_components/settings/instance/InstanceActions.html
+++ b/src/routes/_components/settings/instance/InstanceActions.html
@@ -21,7 +21,7 @@
 </style>
 <script>
   import { store } from '../../../_store/store'
-  import { importShowTextConfirmationDialog } from '../../dialog/asyncDialogs'
+  import { importShowTextConfirmationDialog } from '../../dialog/asyncDialogs/importShowTextConfirmationDialog.js'
   import { switchToInstance, logOutOfInstance } from '../../../_actions/instances'
 
   export default {
diff --git a/src/routes/_components/settings/instance/PushNotificationSettings.html b/src/routes/_components/settings/instance/PushNotificationSettings.html
index 34be2ebd..5d7e1a2a 100644
--- a/src/routes/_components/settings/instance/PushNotificationSettings.html
+++ b/src/routes/_components/settings/instance/PushNotificationSettings.html
@@ -41,7 +41,7 @@
 </style>
 <script>
   import { store } from '../../../_store/store'
-  import { importShowTextConfirmationDialog } from '../../dialog/asyncDialogs'
+  import { importShowTextConfirmationDialog } from '../../dialog/asyncDialogs/importShowTextConfirmationDialog.js'
   import { logOutOfInstance } from '../../../_actions/instances'
   import { updatePushSubscriptionForInstance, updateAlerts } from '../../../_actions/pushSubscription'
   import { toast } from '../../toast/toast'
diff --git a/src/routes/_components/snackbar/snackbar.js b/src/routes/_components/snackbar/snackbar.js
index 597ee215..83262c04 100644
--- a/src/routes/_components/snackbar/snackbar.js
+++ b/src/routes/_components/snackbar/snackbar.js
@@ -1,4 +1,4 @@
-import { importSnackbar } from '../../_utils/asyncModules'
+import { importSnackbar } from '../../_utils/asyncModules/importSnackbar.js'
 
 let snackbar
 
diff --git a/src/routes/_components/status/Media.html b/src/routes/_components/status/Media.html
index 6351b24a..af522849 100644
--- a/src/routes/_components/status/Media.html
+++ b/src/routes/_components/status/Media.html
@@ -102,7 +102,7 @@
 </style>
 <script>
   import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT, ONE_TRANSPARENT_PIXEL } from '../../_static/media'
-  import { importShowMediaDialog } from '../dialog/asyncDialogs'
+  import { importShowMediaDialog } from '../dialog/asyncDialogs/importShowMediaDialog.js'
   import { mouseover } from '../../_utils/events'
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
   import PlayVideoIcon from '../PlayVideoIcon.html'
diff --git a/src/routes/_components/status/StatusToolbar.html b/src/routes/_components/status/StatusToolbar.html
index e15b23e2..a7ecd700 100644
--- a/src/routes/_components/status/StatusToolbar.html
+++ b/src/routes/_components/status/StatusToolbar.html
@@ -69,7 +69,7 @@
   import { registerClickDelegates } from '../../_utils/delegate'
   import { setFavorited } from '../../_actions/favorite'
   import { setReblogged } from '../../_actions/reblog'
-  import { importShowStatusOptionsDialog } from '../dialog/asyncDialogs'
+  import { importShowStatusOptionsDialog } from '../dialog/asyncDialogs/importShowStatusOptionsDialog.js'
   import { updateProfileAndRelationship } from '../../_actions/accounts'
   import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations'
   import { on } from '../../_utils/eventBus'
diff --git a/src/routes/_components/timeline/LazyTimeline.html b/src/routes/_components/timeline/LazyTimeline.html
index d644dc0e..71874775 100644
--- a/src/routes/_components/timeline/LazyTimeline.html
+++ b/src/routes/_components/timeline/LazyTimeline.html
@@ -10,7 +10,8 @@
 </style>
 <script>
   import { store } from '../../_store/store'
-  import { importLoggedInStoreExtensions, importTimeline } from '../../_utils/asyncModules'
+  import { importLoggedInStoreExtensions } from '../../_utils/asyncModules/importLoggedInStoreExtensions'
+  import { importTimeline } from '../../_utils/asyncModules/importTimeline'
 
   export default {
     async oncreate () {
diff --git a/src/routes/_components/timeline/Timeline.html b/src/routes/_components/timeline/Timeline.html
index 771de45c..e5ee25b8 100644
--- a/src/routes/_components/timeline/Timeline.html
+++ b/src/routes/_components/timeline/Timeline.html
@@ -33,12 +33,10 @@
   import MoreHeaderVirtualWrapper from './MoreHeaderVirtualWrapper.html'
   import ScrollListShortcuts from '../shortcut/ScrollListShortcuts.html'
   import Shortcut from '../shortcut/Shortcut.html'
-  import {
-    importVirtualList,
-    importList,
-    importStatusVirtualListItem,
-    importNotificationVirtualListItem
-  } from '../../_utils/asyncModules'
+  import { importVirtualList } from '../../_utils/asyncModules/importVirtualList'
+  import { importList } from '../../_utils/asyncModules/importList'
+  import { importStatusVirtualListItem } from '../../_utils/asyncModules/importStatusVirtualListItem'
+  import { importNotificationVirtualListItem } from '../../_utils/asyncModules/importNotificationVirtualListItem'
   import { timelines } from '../../_static/timelines'
   import {
     fetchMoreItemsAtBottomOfTimeline,
diff --git a/src/routes/_components/toast/toast.js b/src/routes/_components/toast/toast.js
index be4e89ac..a6f27ea3 100644
--- a/src/routes/_components/toast/toast.js
+++ b/src/routes/_components/toast/toast.js
@@ -1,4 +1,4 @@
-import { importToast } from '../../_utils/asyncModules'
+import { importToast } from '../../_utils/asyncModules/importToast.js'
 
 let toast
 
diff --git a/src/routes/_database/asyncDatabase.js b/src/routes/_database/asyncDatabase.js
index a9694e2e..79c9c2f3 100644
--- a/src/routes/_database/asyncDatabase.js
+++ b/src/routes/_database/asyncDatabase.js
@@ -2,7 +2,7 @@
 // put an async import of the database, to avoid including it in the main bundle
 // (which doesn't need to run when the user isn't logged in).
 
-import { importDatabase } from '../_utils/asyncModules'
+import { importDatabase } from '../_utils/asyncModules/importDatabase.js'
 
 const handler = {
   get: function (obj, prop) {
diff --git a/src/routes/_react/createEmojiMartPicker.js b/src/routes/_react/createEmojiMartPicker.js
index 4a3bf7d8..36a87a29 100644
--- a/src/routes/_react/createEmojiMartPicker.js
+++ b/src/routes/_react/createEmojiMartPicker.js
@@ -1,4 +1,4 @@
-import { importEmojiMart } from '../_utils/asyncModules'
+import { importEmojiMart } from '../_utils/asyncModules/importEmojiMart.js'
 import { loadCSS } from '../_utils/loadCSS'
 
 async function fetchEmojiMartData () {
diff --git a/src/routes/_store/observers/leftRightFocusObservers.js b/src/routes/_store/observers/leftRightFocusObservers.js
index 206b5ee7..cfb9b88b 100644
--- a/src/routes/_store/observers/leftRightFocusObservers.js
+++ b/src/routes/_store/observers/leftRightFocusObservers.js
@@ -1,7 +1,7 @@
 // Makes it so the left and right arrows change focus, ala Tab/Shift+Tab. This is mostly designed
 // for KaiOS devices.
 
-import { importArrowKeyNavigation } from '../../_utils/asyncModules'
+import { importArrowKeyNavigation } from '../../_utils/asyncModules/importArrowKeyNavigation.js'
 
 let arrowKeyNav
 
diff --git a/src/routes/_store/observers/setupLoggedInObservers.js b/src/routes/_store/observers/setupLoggedInObservers.js
index f39a75aa..787af29a 100644
--- a/src/routes/_store/observers/setupLoggedInObservers.js
+++ b/src/routes/_store/observers/setupLoggedInObservers.js
@@ -1,4 +1,4 @@
-import { importLoggedInStoreExtensions } from '../../_utils/asyncModules'
+import { importLoggedInStoreExtensions } from '../../_utils/asyncModules/importLoggedInStoreExtensions.js'
 
 // An observer that calls an observer... this is a bit weird, but it eliminates
 // circular dependencies and also allows us to lazy load observers/computations
diff --git a/src/routes/_utils/asyncModules.js b/src/routes/_utils/asyncModules.js
deleted file mode 100644
index d8308447..00000000
--- a/src/routes/_utils/asyncModules.js
+++ /dev/null
@@ -1,65 +0,0 @@
-const getDefault = mod => mod.default
-
-export const importTimeline = () => import(
-  /* webpackChunkName: 'Timeline' */ '../_components/timeline/Timeline.html'
-).then(getDefault)
-
-export const importVirtualList = () => import(
-  /* webpackChunkName: 'VirtualList.html' */ '../_components/virtualList/VirtualList.html'
-).then(getDefault)
-
-export const importList = () => import(
-  /* webpackChunkName: 'List.html' */ '../_components/list/List.html'
-).then(getDefault)
-
-export const importStatusVirtualListItem = () => import(
-  /* webpackChunkName: 'StatusVirtualListItem.html' */ '../_components/timeline/StatusVirtualListItem.html'
-).then(getDefault)
-
-export const importNotificationVirtualListItem = () => import(
-  /* webpackChunkName: 'NotificationVirtualListItem.html' */ '../_components/timeline/NotificationVirtualListItem.html'
-).then(getDefault)
-
-export const importDatabase = () => import(
-  /* webpackChunkName: 'database.js' */ '../_database/databaseApis.js'
-)
-
-export const importLoggedInStoreExtensions = () => import(
-  /* webpackChunkName: 'loggedInStoreExtensions.js' */ '../_store/loggedInStoreExtensions.js'
-)
-
-export const importNavShortcuts = () => import(
-  /* webpackChunkName: 'NavShortcuts' */ '../_components/NavShortcuts.html'
-).then(getDefault)
-
-export const importEmojiMart = () => import(
-  /* webpackChunkName: 'createEmojiMartPickerFromData.js' */ '../_react/createEmojiMartPickerFromData.js'
-).then(getDefault)
-
-export const importToast = () => import(
-  /* webpackChunkName: 'Toast.html' */ '../_components/toast/Toast.html'
-).then(getDefault)
-
-export const importSnackbar = () => import(
-  /* webpackChunkName: 'Snackbar.html' */ '../_components/snackbar/Snackbar.html'
-).then(getDefault)
-
-export const importComposeBox = () => import(
-  /* webpackChunkName: 'ComposeBox.html' */ '../_components/compose/ComposeBox.html'
-).then(getDefault)
-
-export const importTesseractWorker = () => import(
-  /* webpackChunkName: 'tesseractWorker' */ '../_utils/tesseractWorker.js'
-).then(getDefault)
-
-export const importVirtualListStore = () => import(
-  /* webpackChunkName: 'virtualListStore.js' */ '../_components/virtualList/virtualListStore.js'
-)
-
-export const importPageLifecycle = () => import(
-  /* webpackChunkName: 'page-lifecycle' */ 'page-lifecycle/dist/lifecycle.mjs'
-).then(getDefault)
-
-export const importArrowKeyNavigation = () => import(
-  /* webpackChunkName: 'arrow-key-navigation' */ 'arrow-key-navigation'
-)
diff --git a/src/routes/_utils/asyncModules/importArrowKeyNavigation.js b/src/routes/_utils/asyncModules/importArrowKeyNavigation.js
new file mode 100644
index 00000000..ef802092
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importArrowKeyNavigation.js
@@ -0,0 +1,3 @@
+export const importArrowKeyNavigation = () => import(
+  /* webpackChunkName: 'arrow-key-navigation' */ 'arrow-key-navigation'
+)
diff --git a/src/routes/_utils/asyncModules/importComposeBox.js b/src/routes/_utils/asyncModules/importComposeBox.js
new file mode 100644
index 00000000..0ee78855
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importComposeBox.js
@@ -0,0 +1,3 @@
+export const importComposeBox = () => import(
+  /* webpackChunkName: 'ComposeBox.html' */ '../../_components/compose/ComposeBox.html'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importDatabase.js b/src/routes/_utils/asyncModules/importDatabase.js
new file mode 100644
index 00000000..1a72be14
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importDatabase.js
@@ -0,0 +1,3 @@
+export const importDatabase = () => import(
+  /* webpackChunkName: 'database.js' */ '../../_database/databaseApis.js'
+)
diff --git a/src/routes/_utils/asyncModules/importEmojiMart.js b/src/routes/_utils/asyncModules/importEmojiMart.js
new file mode 100644
index 00000000..c1f361d9
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importEmojiMart.js
@@ -0,0 +1,3 @@
+export const importEmojiMart = () => import(
+  /* webpackChunkName: 'createEmojiMartPickerFromData.js' */ '../../_react/createEmojiMartPickerFromData.js'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importList.js b/src/routes/_utils/asyncModules/importList.js
new file mode 100644
index 00000000..29f1813c
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importList.js
@@ -0,0 +1,3 @@
+export const importList = () => import(
+  /* webpackChunkName: 'List.html' */ '../../_components/list/List.html'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importLoggedInStoreExtensions.js b/src/routes/_utils/asyncModules/importLoggedInStoreExtensions.js
new file mode 100644
index 00000000..80fdc2ae
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importLoggedInStoreExtensions.js
@@ -0,0 +1,3 @@
+export const importLoggedInStoreExtensions = () => import(
+  /* webpackChunkName: 'loggedInStoreExtensions.js' */ '../../_store/loggedInStoreExtensions.js'
+)
diff --git a/src/routes/_utils/asyncModules/importNavShortcuts.js b/src/routes/_utils/asyncModules/importNavShortcuts.js
new file mode 100644
index 00000000..16b24a40
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importNavShortcuts.js
@@ -0,0 +1,3 @@
+export const importNavShortcuts = () => import(
+  /* webpackChunkName: 'NavShortcuts' */ '../../_components/NavShortcuts.html'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importNotificationVirtualListItem.js b/src/routes/_utils/asyncModules/importNotificationVirtualListItem.js
new file mode 100644
index 00000000..79fcd892
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importNotificationVirtualListItem.js
@@ -0,0 +1,3 @@
+export const importNotificationVirtualListItem = () => import(
+  /* webpackChunkName: 'NotificationVirtualListItem.html' */ '../../_components/timeline/NotificationVirtualListItem.html'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importPageLifecycle.js b/src/routes/_utils/asyncModules/importPageLifecycle.js
new file mode 100644
index 00000000..a8515171
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importPageLifecycle.js
@@ -0,0 +1,3 @@
+export const importPageLifecycle = () => import(
+  /* webpackChunkName: 'page-lifecycle' */ 'page-lifecycle/dist/lifecycle.mjs'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importSnackbar.js b/src/routes/_utils/asyncModules/importSnackbar.js
new file mode 100644
index 00000000..aa1605b2
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importSnackbar.js
@@ -0,0 +1,3 @@
+export const importSnackbar = () => import(
+  /* webpackChunkName: 'Snackbar.html' */ '../../_components/snackbar/Snackbar.html'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importStatusVirtualListItem.js b/src/routes/_utils/asyncModules/importStatusVirtualListItem.js
new file mode 100644
index 00000000..cb635c32
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importStatusVirtualListItem.js
@@ -0,0 +1,3 @@
+export const importStatusVirtualListItem = () => import(
+  /* webpackChunkName: 'StatusVirtualListItem.html' */ '../../_components/timeline/StatusVirtualListItem.html'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importTesseractWorker.js b/src/routes/_utils/asyncModules/importTesseractWorker.js
new file mode 100644
index 00000000..4f10d33f
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importTesseractWorker.js
@@ -0,0 +1,3 @@
+export const importTesseractWorker = () => import(
+  /* webpackChunkName: 'tesseractWorker' */ '../../_utils/tesseractWorker.js'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importTimeline.js b/src/routes/_utils/asyncModules/importTimeline.js
new file mode 100644
index 00000000..08b0b0a6
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importTimeline.js
@@ -0,0 +1,3 @@
+export const importTimeline = () => import(
+  /* webpackChunkName: 'Timeline' */ '../../_components/timeline/Timeline.html'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importToast.js b/src/routes/_utils/asyncModules/importToast.js
new file mode 100644
index 00000000..65331c71
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importToast.js
@@ -0,0 +1,3 @@
+export const importToast = () => import(
+  /* webpackChunkName: 'Toast.html' */ '../../_components/toast/Toast.html'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importVirtualList.js b/src/routes/_utils/asyncModules/importVirtualList.js
new file mode 100644
index 00000000..b0834ec0
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importVirtualList.js
@@ -0,0 +1,3 @@
+export const importVirtualList = () => import(
+  /* webpackChunkName: 'VirtualList.html' */ '../../_components/virtualList/VirtualList.html'
+).then(mod => mod.default)
diff --git a/src/routes/_utils/asyncModules/importVirtualListStore.js b/src/routes/_utils/asyncModules/importVirtualListStore.js
new file mode 100644
index 00000000..f6b60e71
--- /dev/null
+++ b/src/routes/_utils/asyncModules/importVirtualListStore.js
@@ -0,0 +1,3 @@
+export const importVirtualListStore = () => import(
+  /* webpackChunkName: 'virtualListStore.js' */ '../../_components/virtualList/virtualListStore.js'
+)
diff --git a/src/routes/_utils/lifecycle.js b/src/routes/_utils/lifecycle.js
index 673e076c..c139f81f 100644
--- a/src/routes/_utils/lifecycle.js
+++ b/src/routes/_utils/lifecycle.js
@@ -1,6 +1,6 @@
 // the page-lifecycle package causes some problems (doesn't work in node),
 // and plus it's not needed immediately, so lazy-load it
-import { importPageLifecycle } from './asyncModules'
+import { importPageLifecycle } from './asyncModules/importPageLifecycle.js'
 
 function addEventListener (event, func) {
   if (process.browser) {
diff --git a/src/routes/_utils/runTesseract.js b/src/routes/_utils/runTesseract.js
index 1896213d..29ee3c5b 100644
--- a/src/routes/_utils/runTesseract.js
+++ b/src/routes/_utils/runTesseract.js
@@ -1,4 +1,4 @@
-import { importTesseractWorker } from '../_utils/asyncModules'
+import { importTesseractWorker } from '../_utils/asyncModules/importTesseractWorker.js'
 
 const DESTROY_WORKER_DELAY = 300000 // 5 minutes
 
diff --git a/src/routes/share.html b/src/routes/share.html
index 3151019d..613eca7f 100644
--- a/src/routes/share.html
+++ b/src/routes/share.html
@@ -3,7 +3,7 @@
   import { store } from './_store/store'
   import { goto } from '../../__sapper__/client'
   import { decodeURIComponentWithPluses } from './_utils/decodeURIComponentWithPluses'
-  import { importLoggedInStoreExtensions } from './_utils/asyncModules'
+  import { importLoggedInStoreExtensions } from './_utils/asyncModules/importLoggedInStoreExtensions.js'
 
   const SHARE_KEYS = ['title', 'text', 'url']