From dbd6c35a88b7f2cfa33714d19bd7ac0f1661155f Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 15 Dec 2018 17:13:40 -0800 Subject: [PATCH] perf: move indexeddb operations to async module (#813) --- src/routes/_database/asyncDatabase.js | 19 +++++++++++++++++++ src/routes/_database/database.js | 4 +++- src/routes/_database/database.prod.js | 2 ++ src/routes/_utils/asyncModules.js | 4 ++++ webpack/client.config.js | 4 ++++ 5 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 src/routes/_database/asyncDatabase.js create mode 100644 src/routes/_database/database.prod.js diff --git a/src/routes/_database/asyncDatabase.js b/src/routes/_database/asyncDatabase.js new file mode 100644 index 00000000..c574a483 --- /dev/null +++ b/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) diff --git a/src/routes/_database/database.js b/src/routes/_database/database.js index 8c71c096..9a8eefc3 100644 --- a/src/routes/_database/database.js +++ b/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 } diff --git a/src/routes/_database/database.prod.js b/src/routes/_database/database.prod.js new file mode 100644 index 00000000..de1569a9 --- /dev/null +++ b/src/routes/_database/database.prod.js @@ -0,0 +1,2 @@ +import { asyncDatabase } from './asyncDatabase' +export { asyncDatabase as database } diff --git a/src/routes/_utils/asyncModules.js b/src/routes/_utils/asyncModules.js index 56af0b8f..c7ae0b32 100644 --- a/src/routes/_utils/asyncModules.js +++ b/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' + ) diff --git a/webpack/client.config.js b/webpack/client.config.js index 0754ef4c..fff28e32 100644 --- a/webpack/client.config.js +++ b/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 })