Reduce entry bundle size - Part 3 #13099

mayagbarnes · 2025-11-24T01:03:15Z

Describe your changes

Attempt to improve initial load time by reducing dependencies included in entry bundle.

Dependencies removed from entry:

rehype-katex & rehype-raw & parse5
- Lazy load rehype-katex in StreamlitMarkdown when markdown contains math syntax
- Lazy load rehype-raw in StreamlitMarkdown when allowHTML is true
@sindresorhus:
- node-emoji depends on @sindresorhus - refactor Favicon & StreamlitMarkdown to lazy load remark-emoji for shortcodes
@testing-library
- We export some test utilities from @streamlit/lib so improve tree-shaking
lodash
- reduce dependency size by transitioning to lodash-es

Bundle Analysis:

Before (left): 3.51 MB & After (right): 2.38 MB

snyk-io · 2025-11-24T01:03:25Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

github-actions · 2025-11-24T01:03:30Z

✅ PR preview is ready!

Name	Link
📦 Wheel file	https://core-previews.s3-us-west-2.amazonaws.com/pr-13099/streamlit-1.51.0-py3-none-any.whl
📦 `@streamlit/component-v2-lib`	Download from artifacts
🕹️ Preview app	pr-13099.streamlit.app (☁️ Deploy here if not accessible)

mayagbarnes · 2025-11-24T01:03:37Z

Reduce entry bundle size - Part 5 #13128
Reduce entry bundle size - Part 4 #13115
Reduce entry bundle size - Part 3 #13099 👈 (View in Graphite)
Reduce entry bundle size - Part 2 #13077
Reduce entry bundle size - Part 1 #13071
develop

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2025-11-24T01:09:38Z

📉 Significant wheel size change detected

The wheel file size has decreased by 0.27% (threshold: 0.25%)

Current PR: 8758.08 KB
Latest develop: 8781.64 KB

Please verify that this change is expected.

github-actions · 2025-11-24T01:09:51Z

📉 Significant bundle size change detected

Metric	This Branch	`develop`	Change (%)
Total (gzip)	8.16 MiB	8.21 MiB	-0.60%
Entry (gzip)	756.32 KiB	1.01 MiB	-27.11%

Please verify that this change is expected.

📊 View detailed bundle comparison

frontend/lib/src/components/elements/Favicon/Favicon.tsx

Copilot

Pull request overview

This PR reduces the entry bundle size from 3.51 MB to 2.37 MB (~32% reduction) by lazy-loading heavy dependencies and migrating from lodash to the tree-shakeable lodash-es library.

Key Changes:

Lazy-load rehype-katex, rehype-raw, and remark-emoji in StreamlitMarkdown only when needed
Lazy-load node-emoji in Favicon component for emoji shortcode conversion
Migrate all lodash imports to lodash-es for better tree-shaking

Reviewed changes

Copilot reviewed 44 out of 45 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/yarn.lock	Update dependencies: lodash → lodash-es and corresponding type definitions
frontend/lib/package.json	Add lodash-es dependency, update types, add `sideEffects: false` for tree-shaking
frontend/connection/package.json	Migrate to lodash-es
frontend/app/package.json	Migrate to lodash-es
frontend/app/vite.config.ts	Add alias to redirect lodash imports to lodash-es
frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx	Implement lazy loading for rehype-katex, rehype-raw, and remark-emoji with detection heuristics
frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.test.tsx	Update tests to handle async plugin loading
frontend/lib/src/components/elements/Favicon/Favicon.tsx	Refactor to lazy-load node-emoji only for shortcode conversion
frontend/lib/src/components/elements/Favicon/Favicon.test.tsx	Update tests to handle async favicon setting
frontend/app/src/util/AppNavigation.ts	Add `hasSetDefaultFavicon` flag and make page config flags sticky
frontend/app/src/App.tsx	Ensure default favicon is set only once per page load; replace lodash `without` with native filter
frontend/lib/src/*/.ts(x)	Migrate lodash imports from default imports to named imports from lodash-es
frontend/app/src/*/.ts(x)	Migrate lodash imports to lodash-es
frontend/connection/src/*/.ts(x)	Migrate lodash imports to lodash-es

frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

frontend/lib/package.json

github-actions · 2025-11-25T01:40:17Z

📉 Frontend coverage change detected

The frontend unit test (vitest) coverage has decreased by 0.0200%

Current PR: 87.5700% (51006 lines, 6335 missed)
Latest develop: 87.5900% (50855 lines, 6309 missed)

✅ Coverage change is within normal range.

📊 View detailed coverage comparison

lukasmasuch · 2025-11-25T16:47:30Z

frontend/lib/package.json

    }
  },
+  "sideEffects": [
+    "./src/index.ts"


question: whats adding for having this here?

We previously had the below, but with the bokeh change we effectively changed our sideEffects specification to true, making for inefficient tree shaking (bundlers now assume they cannot remove any imported module in the package).

"sideEffects": [ "**/vendor/bokeh/**" ],

In particular, this was causing the inclusion of @testing-library in the entry bundle.

Oh, that explains why the the entry size went up after the bokeh removal. Good to know!

lukasmasuch · 2025-11-25T16:56:02Z

frontend/app/src/util/AppNavigation.ts

    this.onPageIconChange = onPageIconChange
    this.isPageIconSet = false
    this.isPageTitleSet = false
+    this.hasSetDefaultFavicon = false


suggestion: I think it might be good to add some unit tests for the new logic around the hasSetDefaultFavicon flag

lukasmasuch · 2025-11-25T17:57:00Z

frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

+function containsEmojiShortcodes(source: string): boolean {
+  return /:(?!material\/|streamlit:)\w[\w_-]*:/.test(source)
+}
+
+/**
+ * Detects if the markdown source contains math syntax that requires KaTeX.
+ * Checks for inline math ($...$) and display math ($$...$$) patterns.
+ *
+ * @param source - The markdown source string to check
+ * @returns true if math syntax is detected, false otherwise
+ */
+function containsMathSyntax(source: string): boolean {
+  // Detect inline math: $...$ or display math: $$...$$
+  return /\$\$[\s\S]+?\$\$|\$[^$\n]+?\$/.test(source)
+}


suggestion: I think it would be good to add some parameterized unit tests for these contains checks. Not 100% sure, but I believe the containsMathSyntax can be improved by not allowing white spaces after the first $ and before the last $. Otherwise, it might also match something like: the prices is between $5 and $10 as a latex notation.

lukasmasuch · 2025-11-25T18:08:21Z

frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

+ * @returns true if emoji shortcodes are detected, false otherwise
+ */
+function containsEmojiShortcodes(source: string): boolean {
+  return /:(?!material\/|streamlit:)\w[\w_-]*:/.test(source)


I think there might be some emoji shortcodes that might not be covered: e.g. :+1:... maybe a few other cases. You can find the full list of supported shortcodes here: https://streamlit-emoji-shortcodes-streamlit-app-gwckff.streamlit.app/

lukasmasuch

LGTM 👍

mayagbarnes mentioned this pull request Nov 24, 2025

Reduce entry bundle size - Part 1 #13071

Merged

mayagbarnes mentioned this pull request Nov 24, 2025

Reduce entry bundle size - Part 2 #13077

Merged

mayagbarnes added change:refactor PR contains code refactoring without behavior change impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR labels Nov 24, 2025 — with Graphite App

mayagbarnes changed the title ~~Remove plugins from entry~~ Reduce entry bundle size - Part 3 Nov 24, 2025

sfc-gh-mbarnes force-pushed the reduce-bundle-3 branch from e9a7b34 to 248e04c Compare November 24, 2025 02:28

sfc-gh-mbarnes force-pushed the reduce-bundle-2 branch from f21f5cd to dd86849 Compare November 24, 2025 02:28

sfc-gh-mbarnes force-pushed the reduce-bundle-3 branch 2 times, most recently from 539d019 to 34b8a87 Compare November 24, 2025 07:31

mayagbarnes marked this pull request as ready for review November 24, 2025 20:27

mayagbarnes requested a review from Copilot November 24, 2025 20:27

Copilot started reviewing on behalf of mayagbarnes November 24, 2025 20:27 View session

Copilot finished reviewing on behalf of mayagbarnes November 24, 2025 20:31

graphite-app bot reviewed Nov 24, 2025

View reviewed changes

frontend/lib/src/components/elements/Favicon/Favicon.tsx Outdated Show resolved Hide resolved

Copilot AI reviewed Nov 24, 2025

View reviewed changes

frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx Show resolved Hide resolved

frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx Outdated Show resolved Hide resolved

frontend/lib/package.json Outdated Show resolved Hide resolved

sfc-gh-mbarnes force-pushed the reduce-bundle-3 branch from 34b8a87 to e5d6194 Compare November 24, 2025 20:34

sfc-gh-mbarnes force-pushed the reduce-bundle-2 branch from dd86849 to a1e1e47 Compare November 24, 2025 20:34

mayagbarnes changed the base branch from reduce-bundle-2 to graphite-base/13099 November 24, 2025 20:37

sfc-gh-mbarnes force-pushed the reduce-bundle-3 branch from e5d6194 to 4de93bd Compare November 24, 2025 21:36

sfc-gh-mbarnes force-pushed the graphite-base/13099 branch from a1e1e47 to 2623e74 Compare November 24, 2025 21:36

mayagbarnes changed the base branch from graphite-base/13099 to reduce-bundle-2 November 24, 2025 21:36

mayagbarnes changed the base branch from reduce-bundle-2 to graphite-base/13099 November 24, 2025 21:53

sfc-gh-mbarnes force-pushed the reduce-bundle-3 branch from 4de93bd to e11bf89 Compare November 24, 2025 23:07

sfc-gh-mbarnes force-pushed the graphite-base/13099 branch from 2623e74 to 2a6fd5b Compare November 24, 2025 23:07

mayagbarnes changed the base branch from graphite-base/13099 to develop November 24, 2025 23:07

sfc-gh-mbarnes force-pushed the reduce-bundle-3 branch from e11bf89 to a6e325e Compare November 25, 2025 01:29

mayagbarnes mentioned this pull request Nov 25, 2025

Reduce entry bundle size - Part 4 #13115

Merged

lukasmasuch reviewed Nov 25, 2025

View reviewed changes

mayagbarnes added 7 commits November 25, 2025 11:07

Remove plugins from entry

4b8d401

Remove sindresorhus

270d5ec

Reduce lodash

4b825f0

Remove testing-library

bf18346

Try async emoji fix

bc7e1bc

Address comments

512c7a4

Address comments

9cda13b

sfc-gh-mbarnes force-pushed the reduce-bundle-3 branch from a6e325e to 9cda13b Compare November 25, 2025 19:46

lukasmasuch approved these changes Nov 25, 2025

View reviewed changes

mayagbarnes merged commit 5c45d2b into develop Nov 25, 2025
43 of 46 checks passed

mayagbarnes deleted the reduce-bundle-3 branch November 25, 2025 21:21

mayagbarnes mentioned this pull request Nov 25, 2025

Reduce entry bundle size - Part 5 #13128

Merged

Reduce entry bundle size - Part 3 #13099

Reduce entry bundle size - Part 3 #13099

Uh oh!

Conversation

mayagbarnes commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

Bundle Analysis:

Uh oh!

snyk-io bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

github-actions bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

mayagbarnes commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📉 Significant wheel size change detected

Uh oh!

github-actions bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📉 Significant bundle size change detected

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📉 Frontend coverage change detected

Uh oh!

lukasmasuch Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

mayagbarnes Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

lukasmasuch Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

lukasmasuch Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

lukasmasuch Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

lukasmasuch Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

lukasmasuch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mayagbarnes commented Nov 24, 2025 •

edited

Loading

snyk-io bot commented Nov 24, 2025 •

edited

Loading

github-actions bot commented Nov 24, 2025 •

edited

Loading

mayagbarnes commented Nov 24, 2025 •

edited

Loading

github-actions bot commented Nov 24, 2025 •

edited

Loading

github-actions bot commented Nov 24, 2025 •

edited

Loading

github-actions bot commented Nov 25, 2025 •

edited

Loading