perf(web): reduce startup bundle pressure for optional runtimes#744
Closed
limityan wants to merge 3 commits into
Closed
perf(web): reduce startup bundle pressure for optional runtimes#744limityan wants to merge 3 commits into
limityan wants to merge 3 commits into
Conversation
Add the staged Web UI bundle-splitting plan with explicit experience guardrails, P2 before/after measurements, verification gates, and deferred P3 boundaries for component-library barrels and manualChunks. Add repeatable bundle-size and main-entry static-graph reporting scripts so future optimization stages can compare raw/gzip output and assert that optional dependencies stay out of the startup graph.
Move the app startup tool initializer onto a narrow import path, while keeping the public tool/Git/LSP barrels compatible for existing callers. This reduces accidental startup fan-out without changing the post-render Git and LSP initialization sequence. Replace dynamic lucide namespace lookups with explicit icon maps and keep existing fallbacks, so the renderer can tree-shake unused icons without leaving context menus, MiniApp cards, or recommendations blank for unknown icon names. Load Mermaid and Prism only when content actually needs them. Plain Markdown and chat startup no longer prepay those runtimes; code blocks and CodePreview render readable fallback text first and enhance through a cached async Prism loader.
Add guarded Vite manualChunks for React, Monaco, terminal, Markdown, Tiptap, and icon vendors so the app entry no longer carries the full startup graph as one cache unit. Narrow component-library imports in chat, navigation, session, and tool-card hot paths while keeping the shared barrel exports available for legacy callers. Document the P3 measurements and retain the optional Mermaid/Prism boundary by verifying those assets are not preloaded from index.html.
Collaborator
Author
|
Closed in favor of #746, which now contains the stage 0-4 implementation squashed into two commits and excludes the design document from the submitted diff. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR completes the P2 and P3 Web UI bundle optimization plan without changing
chunkSizeWarningLimit, without lazy-loading the main session/chat path, and without removing product-facing capabilities. The work narrows accidental startup dependencies first, then applies guarded vendor chunking once the dependency graph is cleaner.The PR is intentionally capped at 3 commits:
Optimized Scenarios
./toolsbarrel just to run post-render tool initialization. Startup now uses a narrow./tools/initializeToolsentry while Git/LSP/tool barrels remain compatible.@/component-libraryimports in chat input, pending queue, nav/session rows, model round header, and tool-card status paths so hot UI code does not go through the root component barrel unnecessarily.manualChunksfor React, Monaco, terminal, Markdown, Tiptap, and Lucide icons, improving cache boundaries while keeping Mermaid/Prism out ofindex.htmlpreloads.Measured Benefit
Baseline before P2:
9953.0 KiB raw / 2802.0 KiB gzip14332.4 KiB raw / 3905.1 KiB gzip1067local modulesAfter P2:
8242.6 KiB raw / 2286.1 KiB gzip13952.4 KiB raw / 3930.0 KiB gzip1013local modulesmermaidandreact-syntax-highlighterare no longer statically reachable fromsrc/web-ui/src/main.tsxAfter P3:
vendor-monaco-DdXR92sU.jsat3771.6 KiB raw / 959.3 KiB gzipindex-Nu1_3coB.jsat3226.0 KiB raw / 933.2 KiB gzip13952.1 KiB raw / 3880.2 KiB gzip1013local modulesdist/index.htmldoes not preload Mermaid, Prism, syntax-highlight, orreact-syntax-highlighterassetsCompared with P2, P3 reduces the largest single entry JS by about
4471.0 KiB raw / 1326.8 KiB gzip, and reduces the app entry itself by about5016.6 KiB raw / 1352.9 KiB gzip. The remaining large warnings now point at real eager hotspots such as Monaco/editor/terminal rather than one monolithic app entry.Verification
pnpm run lint:webpnpm run type-check:webpnpm --dir src/web-ui run test:runpnpm --dir src/web-ui buildpnpm run verify:monaco-assetsnode scripts/report-web-bundle-size.cjs --top=26node scripts/report-web-main-static-graph.cjs --assert-external-unreachable=react-syntax-highlighter --assert-external-unreachable=mermaid --assert-no-direct-import=src/web-ui/src/main.tsx:./tools --top=12Select-String -Path dist\index.html -Pattern mermaid|syntax|prism|react-syntaxproduced no outputgit diff --checkNote:
pnpm run e2e:test:l0was attempted during the P2 investigation, but the app shell did not become ready within 30000ms, so it is not counted as a passing verification signal.