Reduce entry bundle size - Part 2 #13077
Merged
Conversation
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
Contributor
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
mayagbarnes
changed the title
Contributor
✅ PR preview is ready!
|
Collaborator
Author
This stack of pull requests is managed by Graphite. Learn more about stacking. |
mayagbarnes
added
change:refactor
Graphite App
Contributor
📉 Significant wheel size change detectedThe wheel file size has decreased by 0.49% (threshold: 0.25%)
Please verify that this change is expected. |
Contributor
📈 Frontend coverage change detectedThe frontend unit test (vitest) coverage has increased by 0.0300%
🎉 Great job on improving test coverage! |
sfc-gh-mbarnes
force-pushed
the
reduce-bundle-2
branch
from
240700f to
1765e9f
Compare
sfc-gh-mbarnes
force-pushed
the
reduce-bundle
branch
from
c74645b to
d38f456
Compare
Contributor
📉 Significant bundle size change detected
Please verify that this change is expected. |
sfc-gh-mbarnes
force-pushed
the
reduce-bundle-2
branch
from
f21f5cd to
dd86849
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR reduces the entry bundle size by ~1.6MB (from 5.11MB to 3.51MB) through lazy loading of syntax highlighting dependencies and creating lighter alternatives for error dialogs. The key optimization is deferring the loading of react-syntax-highlighter, refractor, and highlight.js until they're actually needed.
Key Changes:
- Lazy loaded
StreamlitSyntaxHighlighterinStreamlitMarkdownwith Suspense fallback - Created
StreamlitErrorCodeBlockas a minimal alternative without syntax highlighting - Created
DialogErrorMessagecomponent that parses markdown links and plain URLs without full markdown rendering - Refactored error handling to use
ErrorDetailstype with separatemessageandcodeBlockfields
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
frontend/lib/src/index.ts |
Updated export from StreamlitSyntaxHighlighter to StreamlitErrorCodeBlock |
frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx |
Implemented lazy loading for StreamlitSyntaxHighlighter with Suspense and Skeleton fallback |
frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.test.tsx |
Updated tests to handle async lazy loading with findBy queries |
frontend/lib/src/components/shared/StreamlitMarkdown/Heading.test.tsx |
Updated tests to wait for lazy-loaded content |
frontend/lib/src/components/elements/CodeBlock/StreamlitErrorCodeBlock.tsx |
New minimal code block component without syntax highlighting for error displays |
frontend/lib/src/components/elements/CodeBlock/StreamlitErrorCodeBlock.test.tsx |
Comprehensive test coverage for the new error code block component |
frontend/connection/src/types.ts |
Added ErrorDetails interface to structure error messages with optional code blocks |
frontend/connection/src/WebsocketConnection.tsx |
Updated to use ErrorDetails instead of plain string error messages |
frontend/connection/src/WebsocketConnection.test.tsx |
Updated all tests to use new ErrorDetails structure |
frontend/connection/src/StaticConnection.tsx |
Updated error handling to use ErrorDetails |
frontend/connection/src/DoInitPings.tsx |
Refactored error messages to separate human-readable text from code blocks |
frontend/connection/src/ConnectionManager.ts |
Updated connection error handling to use ErrorDetails |
frontend/app/src/components/StreamlitDialog/styled-components.ts |
Added StyledErrorText component with conditional spacing |
frontend/app/src/components/StreamlitDialog/StreamlitDialog.tsx |
Replaced StreamlitSyntaxHighlighter with StreamlitErrorCodeBlock in compile error dialog |
frontend/app/src/components/StreamlitDialog/DialogErrorMessage.tsx |
New component for rendering error messages with link parsing, without full markdown |
frontend/app/src/components/StreamlitDialog/DialogErrorMessage.test.tsx |
Comprehensive test coverage for link parsing and error display |
frontend/app/src/App.tsx |
Updated error handling to use ErrorDetails and DialogErrorMessage |
frontend/app/src/App.test.tsx |
Updated all tests to use new ErrorDetails structure |
frontend/app/src/components/StreamlitDialog/DialogErrorMessage.tsx
Outdated
Show resolved
Hide resolved
frontend/app/src/components/StreamlitDialog/DialogErrorMessage.tsx
Outdated
Show resolved
Hide resolved
sfc-gh-mbarnes
force-pushed
the
reduce-bundle
branch
from
1468883 to
9458342
Compare
sfc-gh-mbarnes
force-pushed
the
reduce-bundle-2
branch
from
dd86849 to
a1e1e47
Compare
lukasmasuch
reviewed
Nov 24, 2025
| * Parse message text and convert markdown links [text](url) and plain URLs | ||
| * into clickable anchor tags. | ||
| */ | ||
| function parseLinks(text: string): ReactNode[] { |
Collaborator
There was a problem hiding this comment.
question: do you have an example case where we render markdown links via the dialog? E.g. do we actually need to support any type of advanced rendering here?
Collaborator
Author
There was a problem hiding this comment.
We use the link markdown here for retryWhenIsForbidden for CORS documentation, and the ForwardMessageCache errors also use [report this bug](url) so thought it made sense to support this pattern
Collaborator
There was a problem hiding this comment.
ok, I think it might be good to generate some dedicated parameterized unit test cases for parseLinks as well.
lukasmasuch
approved these changes
Nov 24, 2025
| * Parse message text and convert markdown links [text](url) and plain URLs | ||
| * into clickable anchor tags. | ||
| */ | ||
| function parseLinks(text: string): ReactNode[] { |
Collaborator
There was a problem hiding this comment.
ok, I think it might be good to generate some dedicated parameterized unit test cases for parseLinks as well.
sfc-gh-mbarnes
force-pushed
the
reduce-bundle-2
branch
from
501dccb to
2623e74
Compare
This was referenced Nov 25, 2025
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.
Describe your changes
Attempt to improve initial load time by reducing dependencies included in entry bundle.
StreamlitSyntaxHighlighterinStreamlitMarkdownStreamlitSyntaxHighlighterwith more minimalStreamlitErrorCodeBlockinScriptCompileErrorDialogStreamlitMarkdownin Warning/Connection error dialogs with newDialogErrorMessageBefore:
After:
Dependencies removed from entry:
highlight.js/librefractorreact-syntax-highlighterreact-syntax-highlighteris a syntax highlighting lib which usesrefractor&highlight.js.Bundle Analysis:
Before (left): 5.11 MB & After (right): 3.51 MB
