perf: lazy-load logged-in observers, fix circular dependencies (#823)

* perf: lazy-load logged-in observers, fix circular dependencies

* I guess async deps don't count as circular deps
This commit is contained in:
Nolan Lawson 2018-12-16 10:22:34 -08:00 committed by GitHub
parent beb4d6e119
commit 14a618f374
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 71 additions and 39 deletions

33
package-lock.json generated
View File

@ -2061,14 +2061,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -2083,20 +2081,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -2213,8 +2208,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -2226,7 +2220,6 @@
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -2241,7 +2234,6 @@
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -2249,14 +2241,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
"integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -2275,7 +2265,6 @@
"version": "0.5.1", "version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -2356,8 +2345,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -2369,7 +2357,6 @@
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -2491,7 +2478,6 @@
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -2634,6 +2620,11 @@
"safe-buffer": "^5.0.1" "safe-buffer": "^5.0.1"
} }
}, },
"circular-dependency-plugin": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-5.0.2.tgz",
"integrity": "sha512-oC7/DVAyfcY3UWKm0sN/oVoDedQDQiw/vIiAnuTWTpE5s0zWf7l3WY417Xw/Fbi/QbAjctAkxgMiS9P0s3zkmA=="
},
"circular-json": { "circular-json": {
"version": "0.3.3", "version": "0.3.3",
"resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz", "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",

View File

@ -47,6 +47,7 @@
"cheerio": "^1.0.0-rc.2", "cheerio": "^1.0.0-rc.2",
"child-process-promise": "^2.2.1", "child-process-promise": "^2.2.1",
"chokidar": "^2.0.4", "chokidar": "^2.0.4",
"circular-dependency-plugin": "^5.0.2",
"compression": "^1.7.3", "compression": "^1.7.3",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"css-loader": "^2.0.1", "css-loader": "^2.0.1",

View File

@ -1,4 +1,5 @@
import { database } from '../../_database/database' import { database } from '../../_database/database'
import { store } from '../store'
const SEARCH_RESULTS_LIMIT = 4 const SEARCH_RESULTS_LIMIT = 4
const DATABASE_SEARCH_RESULTS_LIMIT = 30 const DATABASE_SEARCH_RESULTS_LIMIT = 30
@ -20,7 +21,7 @@ function searchEmoji (store, searchText) {
return results return results
} }
export function autosuggestObservers (store) { export function autosuggestObservers () {
store.observe('autosuggestSearchText', async autosuggestSearchText => { store.observe('autosuggestSearchText', async autosuggestSearchText => {
let { composeFocused } = store.get() let { composeFocused } = store.get()
if (!composeFocused || !autosuggestSearchText) { if (!composeFocused || !autosuggestSearchText) {

View File

@ -1,6 +1,8 @@
import { store } from '../store'
let theScrollbarStyle = process.browser && document.getElementById('theScrollbarStyle') let theScrollbarStyle = process.browser && document.getElementById('theScrollbarStyle')
export function customScrollbarObservers (store) { export function customScrollbarObservers () {
store.observe('disableCustomScrollbars', disableCustomScrollbars => { store.observe('disableCustomScrollbars', disableCustomScrollbars => {
if (!process.browser) { if (!process.browser) {
return return

View File

@ -8,6 +8,7 @@ import { getTimeline } from '../../_api/timelines'
import { TIMELINE_BATCH_SIZE } from '../../_static/timelines' import { TIMELINE_BATCH_SIZE } from '../../_static/timelines'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask' import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { mark, stop } from '../../_utils/marks' import { mark, stop } from '../../_utils/marks'
import { store } from '../store'
// stream to watch for home timeline updates and notifications // stream to watch for home timeline updates and notifications
let currentInstanceStream let currentInstanceStream
@ -92,7 +93,7 @@ async function fillGap (instanceName, accessToken, timelineName, firstTimelineIt
} }
} }
export function instanceObservers (store) { export function instanceObservers () {
store.observe('currentInstance', async (currentInstance) => { store.observe('currentInstance', async (currentInstance) => {
if (!process.browser) { if (!process.browser) {
return return

View File

@ -0,0 +1,17 @@
import { instanceObservers } from './instanceObservers'
import { timelineObservers } from './timelineObservers'
import { notificationObservers } from './notificationObservers'
import { autosuggestObservers } from './autosuggestObservers'
import { notificationPermissionObservers } from './notificationPermissionObservers'
import { customScrollbarObservers } from './customScrollbarObservers'
// These observers can be lazy-loaded when the user is actually logged in.
// Prevents circular dependencies and reduces the size of main.js
export default function loggedInObservers () {
instanceObservers()
timelineObservers()
notificationObservers()
autosuggestObservers()
notificationPermissionObservers()
customScrollbarObservers()
}

View File

@ -1,9 +1,10 @@
import { setFavicon } from '../../_utils/setFavicon' import { setFavicon } from '../../_utils/setFavicon'
import { runMediumPriorityTask } from '../../_utils/runMediumPriorityTask' import { runMediumPriorityTask } from '../../_utils/runMediumPriorityTask'
import { store } from '../store'
let currentFaviconHasNotifications = false let currentFaviconHasNotifications = false
export function notificationObservers (store) { export function notificationObservers () {
store.observe('hasNotifications', hasNotifications => { store.observe('hasNotifications', hasNotifications => {
if (!process.browser) { if (!process.browser) {
return return

View File

@ -1,4 +1,6 @@
export function notificationPermissionObservers (store) { import { store } from '../store'
export function notificationPermissionObservers () {
if (!process.browser || !navigator.permissions || !navigator.permissions.query) { if (!process.browser || !navigator.permissions || !navigator.permissions.query) {
return return
} }

View File

@ -1,23 +1,13 @@
import { instanceObservers } from './instanceObservers'
import { timelineObservers } from './timelineObservers'
import { notificationObservers } from './notificationObservers'
import { onlineObservers } from './onlineObservers' import { onlineObservers } from './onlineObservers'
import { navObservers } from './navObservers' import { navObservers } from './navObservers'
import { autosuggestObservers } from './autosuggestObservers'
import { pageVisibilityObservers } from './pageVisibilityObservers' import { pageVisibilityObservers } from './pageVisibilityObservers'
import { resizeObservers } from './resizeObservers' import { resizeObservers } from './resizeObservers'
import { notificationPermissionObservers } from './notificationPermissionObservers' import { setupLoggedInObservers } from './setupLoggedInObservers'
import { customScrollbarObservers } from './customScrollbarObservers'
export function observers (store) { export function observers (store) {
instanceObservers(store)
timelineObservers(store)
notificationObservers(store)
onlineObservers(store) onlineObservers(store)
navObservers(store) navObservers(store)
autosuggestObservers(store)
pageVisibilityObservers(store) pageVisibilityObservers(store)
resizeObservers(store) resizeObservers(store)
notificationPermissionObservers(store) setupLoggedInObservers(store)
customScrollbarObservers(store)
} }

View File

@ -0,0 +1,15 @@
import { importLoggedInObservers } from '../../_utils/asyncModules'
let observedOnce = false
// An observer that calls an observer... this is a bit weird, but it eliminates
// circular dependencies and also allows us to lazy load observers that are
// only needed when you're logged in.
export function setupLoggedInObservers (store) {
store.observe('isUserLoggedIn', isUserLoggedIn => {
if (isUserLoggedIn && !observedOnce) {
importLoggedInObservers().then(loggedInObservers => loggedInObservers())
observedOnce = true
}
})
}

View File

@ -3,8 +3,9 @@ import { createStream } from '../../_actions/streaming'
import { getTimeline } from '../../_api/timelines' import { getTimeline } from '../../_api/timelines'
import { addStatusesOrNotifications } from '../../_actions/addStatusOrNotification' import { addStatusesOrNotifications } from '../../_actions/addStatusOrNotification'
import { TIMELINE_BATCH_SIZE } from '../../_static/timelines' import { TIMELINE_BATCH_SIZE } from '../../_static/timelines'
import { store } from '../store'
export function timelineObservers (store) { export function timelineObservers () {
// stream to watch for local/federated/etc. updates. home and notification // stream to watch for local/federated/etc. updates. home and notification
// updates are handled in timelineObservers.js // updates are handled in timelineObservers.js
let currentTimelineStream let currentTimelineStream

View File

@ -31,3 +31,7 @@ export const importNotificationVirtualListItem = () => import(
export const importDatabase = () => import( export const importDatabase = () => import(
/* webpackChunkName: 'database.js' */ '../_database/databaseApis.js' /* webpackChunkName: 'database.js' */ '../_database/databaseApis.js'
) )
export const importLoggedInObservers = () => import(
/* webpackChunkName: 'loggedInObservers.js' */ '../_store/observers/loggedInObservers.js'
).then(getDefault)

View File

@ -3,6 +3,7 @@ const config = require('sapper/config/webpack.js')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin') const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
const terser = require('./terser.config') const terser = require('./terser.config')
const CircularDependencyPlugin = require('circular-dependency-plugin')
const { mode, dev } = require('./shared.config') const { mode, dev } = require('./shared.config')
module.exports = { module.exports = {
@ -50,6 +51,11 @@ module.exports = {
), ),
new LodashModuleReplacementPlugin({ new LodashModuleReplacementPlugin({
paths: true paths: true
}),
new CircularDependencyPlugin({
exclude: /node_modules/,
failOnError: true,
cwd: process.cwd()
}) })
].concat(dev ? [ ].concat(dev ? [
new webpack.HotModuleReplacementPlugin({ new webpack.HotModuleReplacementPlugin({