perf: move indexeddb operations to async module (#813)

src/routes/_database/asyncDatabase.js

@@ -0,0 +1,19 @@
+// All database functions are asynchronous, so we can just proxy here and
+// 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'
+
+const handler = {
+  get: function (obj, prop) {
+    return async function (...args) {
+      if (!obj[prop]) {
+        let database = await importDatabase()
+        obj[prop] = database[prop]
+      }
+      return obj[prop].apply(null, args)
+    }
+  }
+}
+
+export const asyncDatabase = new Proxy({}, handler)

src/routes/_database/database.js

@@ -1,3 +1,5 @@
-// this used to be workerized, hence the API looks like this
+// The proxy stuff doesn't play well with IDEs, so use this as
+// the dev mode database.js, but swap out the other one in Webpack.
+
 import * as database from './databaseApis'
 export { database }

src/routes/_database/database.prod.js

@@ -0,0 +1,2 @@
+import { asyncDatabase } from './asyncDatabase'
+export { asyncDatabase as database }

src/routes/_utils/asyncModules.js

@@ -47,3 +47,7 @@ export const importStatusVirtualListItem = () => import(
 export const importNotificationVirtualListItem = () => import(
   /* webpackChunkName: 'NotificationVirtualListItem.html' */ '../_components/timeline/NotificationVirtualListItem.html'
   ).then(getDefault)
+
+export const importDatabase = () => import(
+  /* webpackChunkName: 'database.js' */ '../_database/databaseApis.js'
+  )

webpack/client.config.js

@@ -60,6 +60,10 @@ module.exports = {
     }
   },
   plugins: [
+    new webpack.NormalModuleReplacementPlugin(
+      /\/_database\/database\.js$/, // this version plays nicer with IDEs
+      './database.prod.js'
+    ),
     new LodashModuleReplacementPlugin({
       paths: true
     })