mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-28 02:02:08 +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:
@@ -113,21 +113,45 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
|
||||
expect(hasModifiers).toBeTruthy()
|
||||
})
|
||||
|
||||
test('should maintain panel state when switching to terminal', async ({
|
||||
test('should maintain panel state when switching between panels', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
const { bottomPanel } = comfyPage
|
||||
|
||||
// Open shortcuts panel first
|
||||
await bottomPanel.keyboardShortcutsButton.click()
|
||||
await expect(bottomPanel.root).toBeVisible()
|
||||
|
||||
await bottomPanel.toggleButton.click()
|
||||
await expect(bottomPanel.root).toBeVisible()
|
||||
|
||||
await bottomPanel.keyboardShortcutsButton.click()
|
||||
await expect(
|
||||
comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
|
||||
).toBeVisible()
|
||||
|
||||
// Try to open terminal panel - may show terminal OR close shortcuts
|
||||
// depending on whether terminal tabs have loaded (async loading)
|
||||
await bottomPanel.toggleButton.click()
|
||||
|
||||
// Check if terminal tabs loaded (Logs tab visible) or fell back to shortcuts toggle
|
||||
const logsTab = comfyPage.page.getByRole('tab', { name: /Logs/i })
|
||||
const hasTerminalTabs = await logsTab.isVisible().catch(() => false)
|
||||
|
||||
if (hasTerminalTabs) {
|
||||
// Terminal panel is visible - verify we can switch back to shortcuts
|
||||
await expect(bottomPanel.root).toBeVisible()
|
||||
|
||||
// Switch back to shortcuts
|
||||
await bottomPanel.keyboardShortcutsButton.click()
|
||||
|
||||
// Should show shortcuts content again
|
||||
await expect(
|
||||
comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
|
||||
).toBeVisible()
|
||||
} else {
|
||||
// Terminal tabs not loaded - button toggled shortcuts off, reopen for verification
|
||||
await bottomPanel.keyboardShortcutsButton.click()
|
||||
await expect(bottomPanel.root).toBeVisible()
|
||||
await expect(
|
||||
comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
|
||||
).toBeVisible()
|
||||
}
|
||||
})
|
||||
|
||||
test('should handle keyboard navigation', async ({ comfyPage }) => {
|
||||
|
||||
@@ -107,7 +107,6 @@ test.describe('Menu', { tag: '@ui' }, () => {
|
||||
// Checkmark should be invisible initially (panel is hidden)
|
||||
await expect(checkmark).toHaveClass(/invisible/)
|
||||
|
||||
// Click Bottom Panel to toggle it on
|
||||
await bottomPanelItem.click()
|
||||
|
||||
// Verify menu is still visible after clicking
|
||||
|
||||
Reference in New Issue
Block a user