perf: lazy register devtools plugins and reduce unnecessary hook calls (#693)

Author: webfansplz

packages/devtools-kit/src/api/v6/index.ts

@@ -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'
@@ -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
@@ -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 })
   }
 
@@ -102,6 +112,9 @@ export class DevToolsV6PluginAPI {
 
   // timeline
   now(): number {
+    if (devtoolsState.highPerfModeEnabled) {
+      return 0
+    }
     return Date.now()
   }
 
@@ -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 })
   }
 

packages/devtools-kit/src/core/high-perf-mode/index.ts

@@ -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)
+  }
 }

packages/devtools-kit/src/core/plugin/index.ts

@@ -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'
 
@@ -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)