From 48cdd70b5cd94576abf2b3bc77e913d601636339 Mon Sep 17 00:00:00 2001 From: bymyself Date: Fri, 30 Jan 2026 00:20:47 -0800 Subject: [PATCH] perf: code-split xterm bundle and gate terminal features for cloud - Gate logs-terminal keybinding (Ctrl+`) registration for cloud builds - Filter out ToggleBottomPanel command for cloud builds - Gate terminal tab registration in bottomPanelStore for cloud - Convert terminal tab components to async imports (defineAsyncComponent) - Dynamic import of useTerminalTabs module ensures xterm bundle is tree-shaken The ~400KB xterm bundle (vendor-xterm-*.js) is now only loaded on non-cloud distributions when terminal tabs are registered. Fixes COM-14129 Co-authored-by: Amp Amp-Thread-ID: https://ampcode.com/threads/T-019c17af-8992-739f-be03-1e375de1b56b --- .../bottomPanelTabs/useTerminalTabs.ts | 14 +++++++------- src/composables/useCoreCommands.ts | 1 + src/platform/keybindings/keybindingService.ts | 7 +++++++ src/stores/workspace/bottomPanelStore.ts | 18 ++++++++++-------- src/views/GraphView.vue | 2 +- 5 files changed, 26 insertions(+), 16 deletions(-) diff --git a/src/composables/bottomPanelTabs/useTerminalTabs.ts b/src/composables/bottomPanelTabs/useTerminalTabs.ts index 2abc79c93..03b16e675 100644 --- a/src/composables/bottomPanelTabs/useTerminalTabs.ts +++ b/src/composables/bottomPanelTabs/useTerminalTabs.ts @@ -1,27 +1,27 @@ import { markRaw } from 'vue' import { useI18n } from 'vue-i18n' -import CommandTerminal from '@/components/bottomPanel/tabs/terminal/CommandTerminal.vue' import LogsTerminal from '@/components/bottomPanel/tabs/terminal/LogsTerminal.vue' +import CommandTerminal from '@/components/bottomPanel/tabs/terminal/CommandTerminal.vue' import type { BottomPanelExtension } from '@/types/extensionTypes' -export const useLogsTerminalTab = (): BottomPanelExtension => { +export function useLogsTerminalTab(): BottomPanelExtension { const { t } = useI18n() return { id: 'logs-terminal', - title: t('g.logs'), // For command labels (collected by i18n workflow) - titleKey: 'g.logs', // For dynamic translation in UI + title: t('g.logs'), + titleKey: 'g.logs', component: markRaw(LogsTerminal), type: 'vue' } } -export const useCommandTerminalTab = (): BottomPanelExtension => { +export function useCommandTerminalTab(): BottomPanelExtension { const { t } = useI18n() return { id: 'command-terminal', - title: t('g.terminal'), // For command labels (collected by i18n workflow) - titleKey: 'g.terminal', // For dynamic translation in UI + title: t('g.terminal'), + titleKey: 'g.terminal', component: markRaw(CommandTerminal), type: 'vue' } diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts index 319970071..b06e23eef 100644 --- a/src/composables/useCoreCommands.ts +++ b/src/composables/useCoreCommands.ts @@ -8,6 +8,7 @@ import { DEFAULT_DARK_COLOR_PALETTE, DEFAULT_LIGHT_COLOR_PALETTE } from '@/constants/coreColorPalettes' + import { tryToggleWidgetPromotion } from '@/core/graph/subgraph/proxyWidgetUtils' import { t } from '@/i18n' import { diff --git a/src/platform/keybindings/keybindingService.ts b/src/platform/keybindings/keybindingService.ts index 31552ed43..cb335fe52 100644 --- a/src/platform/keybindings/keybindingService.ts +++ b/src/platform/keybindings/keybindingService.ts @@ -1,3 +1,4 @@ +import { isCloud } from '@/platform/distribution/types' import { useSettingStore } from '@/platform/settings/settingStore' import { app } from '@/scripts/app' import { useCommandStore } from '@/stores/commandStore' @@ -108,6 +109,12 @@ export function useKeybindingService() { function registerCoreKeybindings() { for (const keybinding of CORE_KEYBINDINGS) { + if ( + isCloud && + keybinding.commandId === 'Workspace.ToggleBottomPanelTab.logs-terminal' + ) { + continue + } keybindingStore.addDefaultKeybinding(new KeybindingImpl(keybinding)) } } diff --git a/src/stores/workspace/bottomPanelStore.ts b/src/stores/workspace/bottomPanelStore.ts index 017c2e0b2..6c1060663 100644 --- a/src/stores/workspace/bottomPanelStore.ts +++ b/src/stores/workspace/bottomPanelStore.ts @@ -2,10 +2,7 @@ import { defineStore } from 'pinia' import { computed, ref } from 'vue' import { useShortcutsTab } from '@/composables/bottomPanelTabs/useShortcutsTab' -import { - useCommandTerminalTab, - useLogsTerminalTab -} from '@/composables/bottomPanelTabs/useTerminalTabs' + import { useCommandStore } from '@/stores/commandStore' import type { ComfyExtension } from '@/types/comfy' import type { BottomPanelExtension } from '@/types/extensionTypes' @@ -121,10 +118,15 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => { }) } - const registerCoreBottomPanelTabs = () => { - registerBottomPanelTab(useLogsTerminalTab()) - if (isElectron()) { - registerBottomPanelTab(useCommandTerminalTab()) + const registerCoreBottomPanelTabs = async () => { + // Use __DISTRIBUTION__ directly for proper dead code elimination + if (__DISTRIBUTION__ !== 'cloud') { + const { useLogsTerminalTab, useCommandTerminalTab } = + await import('@/composables/bottomPanelTabs/useTerminalTabs') + registerBottomPanelTab(useLogsTerminalTab()) + if (isElectron()) { + registerBottomPanelTab(useCommandTerminalTab()) + } } useShortcutsTab().forEach(registerBottomPanelTab) } diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue index bbe22d1a1..4b5ec6d4a 100644 --- a/src/views/GraphView.vue +++ b/src/views/GraphView.vue @@ -198,7 +198,7 @@ useCommandStore().registerCommands(coreCommands) useMenuItemStore().registerCoreMenuCommands() useKeybindingService().registerCoreKeybindings() useSidebarTabStore().registerCoreSidebarTabs() -useBottomPanelStore().registerCoreBottomPanelTabs() +void useBottomPanelStore().registerCoreBottomPanelTabs() const queuePendingTaskCountStore = useQueuePendingTaskCountStore() const sidebarTabStore = useSidebarTabStore()