Skip to content

perf(graph): lazy-load optional editor UI and styles - #758

Merged
im-ian merged 1 commit into
mainfrom
perf/lazy-load-graph-ui
Aug 6, 2026
Merged

perf(graph): lazy-load optional editor UI and styles#758
im-ian merged 1 commit into
mainfrom
perf/lazy-load-graph-ui

Conversation

@im-ian

@im-ian im-ian commented Aug 6, 2026

Copy link
Copy Markdown
Owner

Summary

This keeps the optional Graph editor out of the initial application payload while preserving its existing creation and session workflows.

  1. Lazy Graph entry points — Load the Graph creation dialog only when requested and the Graph session view only when a Graph session is active.
  2. Shared async editor chunk — Let Vite extract the React Flow editor and preset toolbar used by both Graph entry points.
  3. Deferred Graph styles — Move the React Flow stylesheet from the global application CSS into the lazy Graph editor dependency.
  4. Runtime coverage — Exercise Graph creation, editing, execution, saved-session rendering, and ordinary Chat behavior after the split.

Expected impact

Asset Before After Change
Initial JavaScript 2,981,678 B 2,731,645 B -250,033 B (-8.4%)
Initial JavaScript, local gzip 842,124 B 766,776 B -75,348 B (-8.9%)
Graph shared JavaScript Included initially 237,220 B async chunk Deferred until Graph use
React Flow CSS Included initially 15,413 B async CSS Deferred until Graph use

Design notes

  • The Sidebar dialog and Pane session view are separate lazy boundaries because they are independent Graph entry points.
  • Both boundaries resolve named exports without changing the public component modules.
  • Suspense fallbacks are intentionally empty: Tauri serves packaged assets locally, and existing layout remains stable during the short first load.
  • Graph dialogs now mount only while open; their existing open effect already resets draft and capability state for every invocation.

Test plan

  • pnpm run typecheck — passed
  • pnpm run test — 1,290 tests passed
  • pnpm exec playwright test tests/e2e/graph-editor.spec.ts — 6 tests passed
  • pnpm run test:e2e — 318 tests passed
  • pnpm run build — passed and emitted separate Graph JS/CSS chunks
  • git diff --check — passed

Notes

  • The build still reports the pre-existing main-chunk size warning and ineffective dynamic-import warnings for api.ts and store.ts; this PR materially reduces the main chunk but does not address those separate boundaries.

@im-ian im-ian added the perf Performance improvement label Aug 6, 2026
@im-ian

im-ian commented Aug 6, 2026

Copy link
Copy Markdown
Owner Author

Merge readiness note: this PR is technically mergeable now.

  • GitHub reports MERGEABLE / CLEAN.
  • CI is green: Frontend, E2E (shard 1/2), and E2E (shard 2/2) passed.
  • Self-review is complete with no blocking findings.
  • perf label is applied.
  • Production build evidence confirms the initial JavaScript payload drops by 250,033 bytes (8.4%), with Graph JavaScript and React Flow CSS emitted as async chunks.

Proceeding to merge because the user explicitly requested the reviewed release fixes to be merged.

@im-ian
im-ian merged commit 1cfde69 into main Aug 6, 2026
3 checks passed
@im-ian
im-ian deleted the perf/lazy-load-graph-ui branch August 6, 2026 00:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

perf Performance improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant