Reduce entry bundle size - Part 1#13071
Conversation
✅ 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. |
This stack of pull requests is managed by Graphite. Learn more about stacking. |
✅ PR preview is ready!
|
7284879 to
c74645b
Compare
📉 Significant wheel size change detectedThe wheel file size has decreased by 0.40% (threshold: 0.25%)
Please verify that this change is expected. |
c74645b to
d38f456
Compare
📉 Significant bundle size change detected
Please verify that this change is expected. |
There was a problem hiding this comment.
Pull request overview
This PR reduces the entry bundle size by approximately 33% (from 7.64 MB to 5.11 MB) through lazy loading of heavy dependencies and removing moment from the entry point.
Key changes:
- Replaced
momentusage in App.tsx with a new nativegetScreencastTimestamp()utility function - Lazy loaded three components to exclude their heavy dependencies from the entry bundle:
ArrowTable(moment-timezone),Metric(vega-lite), andJson(react-json-view) - Added comprehensive test coverage for the new timestamp utility function
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/lib/src/util/utils.ts | Added getScreencastTimestamp() function to generate timestamps for screencast filenames without moment dependency |
| frontend/lib/src/util/utils.test.ts | Added comprehensive test suite for getScreencastTimestamp() covering edge cases like padding, midnight, and year boundaries |
| frontend/lib/src/index.ts | Exported getScreencastTimestamp and reordered DownloadContext export alphabetically |
| frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx | Converted ArrowTable, Json, and Metric to lazy loaded components to reduce entry bundle size |
| frontend/app/src/App.tsx | Replaced moment().format() with getScreencastTimestamp() for screencast filename generation |
| import ArrowTable from "~lib/components/elements/ArrowTable" | ||
| import DocString from "~lib/components/elements/DocString" | ||
| import ExceptionElement from "~lib/components/elements/ExceptionElement" |
There was a problem hiding this comment.
question: does it make sense to also lazy-load the other elements here in follow-up PRs?
There was a problem hiding this comment.
I still have some testing to do around this to confirm, but will be part of future PR if it moves needle 👍🏼
1468883 to
9458342
Compare

Describe your changes
Attempt to improve initial load time by reducing dependencies included in entry bundle.
Dependencies removed from entry:
moment-timezone: Removed moment usage fromApp& lazy loadedArrowTablevega-lite: Lazy loadMetriccomponent (already lazy-loadedArrowVegaLiteChart)react-json-view: Lazy loadJsoncomponentBundle Analysis:
Before (left): 7.64 MB & After (right): 5.11 MB
