Skip to content

Commit

Permalink
perf: lazy register devtools plugins and reduce unnecessary hook calls
Browse files Browse the repository at this point in the history
  • Loading branch information
webfansplz committed Nov 11, 2024
1 parent 30d7875 commit ca05d2b
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 2 deletions.
16 changes: 16 additions & 0 deletions packages/devtools-kit/src/api/v6/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { DevtoolsContext } from '../../ctx'
import type { App, ComponentBounds, ComponentInstance, CustomInspectorOptions, DevToolsPlugin, TimelineEventOptions, TimelineLayerOptions } from '../../types'
import { getPluginSettings, initPluginSettings } from '../../core/plugin/plugin-settings'

import { devtoolsState } from '../../ctx'
import { DevToolsContextHookKeys, DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, DevToolsV6PluginAPIHooks } from '../../ctx/hook'
import { getActiveInspectors } from '../../ctx/inspector'
import { devtoolsHooks } from '../../hook'
Expand Down Expand Up @@ -56,6 +57,9 @@ export class DevToolsV6PluginAPI {

// component inspector
notifyComponentUpdate(instance?: ComponentInstance) {
if (devtoolsState.highPerfModeEnabled) {
return
}
const inspector = getActiveInspectors().find(i => i.packageName === this.plugin.descriptor.packageName)
if (inspector?.id) {
// @TODO: handler
Expand Down Expand Up @@ -85,10 +89,16 @@ export class DevToolsV6PluginAPI {
}

sendInspectorTree(inspectorId: string) {
if (devtoolsState.highPerfModeEnabled) {
return
}
this.hooks.callHook(DevToolsContextHookKeys.SEND_INSPECTOR_TREE, { inspectorId, plugin: this.plugin })
}

sendInspectorState(inspectorId: string) {
if (devtoolsState.highPerfModeEnabled) {
return
}
this.hooks.callHook(DevToolsContextHookKeys.SEND_INSPECTOR_STATE, { inspectorId, plugin: this.plugin })
}

Expand All @@ -102,6 +112,9 @@ export class DevToolsV6PluginAPI {

// timeline
now(): number {
if (devtoolsState.highPerfModeEnabled) {
return 0
}
return Date.now()
}

Expand All @@ -110,6 +123,9 @@ export class DevToolsV6PluginAPI {
}

addTimelineEvent(options: TimelineEventOptions) {
if (devtoolsState.highPerfModeEnabled) {
return
}
this.hooks.callHook(DevToolsContextHookKeys.TIMELINE_EVENT_ADDED, { options, plugin: this.plugin })
}

Expand Down
6 changes: 5 additions & 1 deletion packages/devtools-kit/src/core/high-perf-mode/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { devtoolsState } from '../../ctx/state'
import { activeAppRecord, devtoolsState } from '../../ctx/state'
import { registerDevToolsPlugin } from '../plugin'

export function toggleHighPerfMode(state?: boolean) {
devtoolsState.highPerfModeEnabled = state ?? !devtoolsState.highPerfModeEnabled
if (!state && activeAppRecord.value) {
registerDevToolsPlugin(activeAppRecord.value.app)
}
}
3 changes: 2 additions & 1 deletion packages/devtools-kit/src/core/plugin/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { target } from '@vue/devtools-shared'
import { DevToolsPluginAPI } from '../../api'
import { devtoolsContext, devtoolsPluginBuffer } from '../../ctx'
import { devtoolsState } from '../../ctx/state'
import { hook } from '../../hook'
import { App, PluginDescriptor, PluginSetupFunction } from '../../types'

Expand Down Expand Up @@ -40,7 +41,7 @@ export function removeRegisteredPluginApp(app: App) {
}

export function registerDevToolsPlugin(app: App) {
if (target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.has(app))
if (target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.has(app) || devtoolsState.highPerfModeEnabled)
return

target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.add(app)
Expand Down

0 comments on commit ca05d2b

Please sign in to comment.