mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 17:37:46 +00:00
perf: code-split xterm bundle and gate terminal features for cloud (#8528)
## Summary Code-splits the ~400KB xterm bundle and excludes terminal features from cloud distribution where they are not needed. ### Changes - **bottomPanelStore.ts**: Gate terminal tab registration behind `__DISTRIBUTION__ !== 'cloud'` check with dynamic import, enabling tree-shaking - **keybindingService.ts**: Skip logs-terminal keybinding registration for cloud distribution - **vite.config.mts**: Add `vendor-xterm` code splitting group ### Bundle Impact | Distribution | xterm in bundle | Terminal tabs | |--------------|-----------------|---------------| | cloud | ❌ No (~400KB saved) | None | | localhost | ✅ Yes (vendor-xterm chunk) | Logs terminal | | desktop | ✅ Yes (vendor-xterm chunk) | Logs + Command terminal | ### Verification Script Run locally to verify xterm exclusion works correctly: ```bash #!/bin/bash set -e echo "=== Verifying xterm bundle exclusion ===" echo # Clear Nx cache to ensure fresh builds pnpm nx reset 2>/dev/null # Build cloud distribution echo "Building CLOUD distribution..." rm -rf dist DISTRIBUTION=cloud pnpm build --mode production 2>/dev/null echo "Cloud build - checking for xterm:" if grep -r "xterm" dist/assets/*.js >/dev/null 2>&1; then echo " ❌ FAIL: xterm found in cloud bundle" grep -l "xterm" dist/assets/*.js | head -5 else echo " ✅ PASS: xterm NOT in cloud bundle" fi echo # Build localhost distribution echo "Building LOCALHOST distribution..." pnpm nx reset 2>/dev/null rm -rf dist DISTRIBUTION=localhost pnpm build --mode production 2>/dev/null echo "Localhost build - checking for xterm:" if grep -r "xterm" dist/assets/*.js >/dev/null 2>&1; then echo " ✅ PASS: xterm found in localhost bundle" echo " Files containing xterm:" grep -l "xterm" dist/assets/*.js | while read f; do size=$(wc -c < "$f") echo " $(basename $f) ($(numfmt --to=iec $size))" done else echo " ❌ FAIL: xterm NOT in localhost bundle" fi echo echo "=== Verification complete ===" ``` **Note**: Nx cache must be reset between builds with different `DISTRIBUTION` values or it may return stale results. ## Test Plan - [x] Quality gates pass (typecheck, lint, format, tests) - [x] Cloud build verified: xterm NOT present - [x] Localhost build verified: xterm present as vendor-xterm chunk Fixes COM-14129 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8528-perf-code-split-xterm-bundle-and-gate-terminal-features-for-cloud-2fa6d73d365081a093ecc74ca7ce6e7c) by [Unito](https://www.unito.io) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Terminal tab declarations adjusted (no user-visible behavior change). * Bottom panel tabs now load asynchronously; panel toggle falls back to shortcuts when terminal tabs aren’t loaded. * **Chores** * Terminal tabs and related keybindings suppressed in cloud deployments. * Core commands wired to a new utility to support widget promotion. * **Tests** * E2E tests updated to handle async terminal-tab loading and minor test cleanup. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
@@ -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'
|
||||
@@ -75,8 +72,18 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => {
|
||||
}
|
||||
|
||||
const toggleBottomPanel = () => {
|
||||
// Legacy method - toggles terminal panel
|
||||
togglePanel('terminal')
|
||||
// Toggles the terminal panel if available, otherwise falls back to shortcuts
|
||||
// Terminal tabs are loaded asynchronously, so may not be available immediately
|
||||
const terminalPanel = panels.value.terminal
|
||||
if (terminalPanel.tabs.length > 0) {
|
||||
togglePanel('terminal')
|
||||
} else {
|
||||
// Terminal tabs not loaded yet - fall back to shortcuts panel
|
||||
// If no panel is open, open shortcuts
|
||||
// If shortcuts is already open, close it
|
||||
// If another panel is open (shouldn't happen), switch to shortcuts
|
||||
togglePanel('shortcuts')
|
||||
}
|
||||
}
|
||||
|
||||
const setActiveTab = (tabId: string) => {
|
||||
@@ -121,12 +128,23 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => {
|
||||
})
|
||||
}
|
||||
|
||||
const registerCoreBottomPanelTabs = () => {
|
||||
registerBottomPanelTab(useLogsTerminalTab())
|
||||
if (isElectron()) {
|
||||
registerBottomPanelTab(useCommandTerminalTab())
|
||||
}
|
||||
const registerCoreBottomPanelTabs = async () => {
|
||||
// Register shortcuts tabs first (synchronous, always available)
|
||||
useShortcutsTab().forEach(registerBottomPanelTab)
|
||||
|
||||
// Use __DISTRIBUTION__ directly for proper dead code elimination
|
||||
if (__DISTRIBUTION__ !== 'cloud') {
|
||||
try {
|
||||
const { useLogsTerminalTab, useCommandTerminalTab } =
|
||||
await import('@/composables/bottomPanelTabs/useTerminalTabs')
|
||||
registerBottomPanelTab(useLogsTerminalTab())
|
||||
if (isElectron()) {
|
||||
registerBottomPanelTab(useCommandTerminalTab())
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load terminal tabs:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const registerExtensionBottomPanelTabs = (extension: ComfyExtension) => {
|
||||
|
||||
Reference in New Issue
Block a user