CAT-1335: tree shake phosphor icons by benjiaming · Pull Request #16338 · datahub-project/datahub

benjiaming · 2026-02-24T20:43:28Z

Summary: Phase 1 of FE performance optimizations

The DataHub frontend currently produces around 20MB of minified JavaScript across 5 chunks, compressing to approximately 5 MB when gzipped. This is a substantial bundle size that impacts initial load time and performance, particularly on slower networks. Phase 1 addresses some of the issues:

ported chunking from SaaS to vite.config.ts
added antd to chunks
tree-shaking Phosphor icons (we were bundling all 4,539 icons despite using < 200)

Results

Metric	Before	After	Improvement
Total Bundle	20.45 MB	12.9 MB	-36.5% (-7.55 MB)
Gzipped	4.89 MB	3.28 MB	-32.9% (-1.61 MB)
Phosphor Icons	6 MB (4,539 icons)	372 KB (133 icons)	-95.7%
Page Load (3G)	~27s	~18s	-9 seconds

Before

giant monolithic bundle: index-B3Suu7YI.js = 19,395 KB (~19 MB)
no chunking (everything bundled together)
all 4,539 Phosphor icons included (a large block)
no vendor separation

After

vendor-yJ7kOkOV.js: 8.6 MB (8,999.72 KB) [KEY CHUNK]
- React + ReactDOM (bundled together)
- Ant Design + rc-* components (bundled together)
- Material UI + @emotion (bundled together)
- Apollo Client + GraphQL
- Other dependencies (lodash, moment, etc.)
- This is the FIX: React + Ant Design + MUI together = no load order issues
source-CbhsHxku.js: 3.9 MB (4,042.65 KB)
- Application source code
- Custom components, pages, features
phosphor-vendor-D8fS90Jx.js: 372 KB (408.51 KB) [OPTIMIZED]
- Custom Phosphor icons bundle (133 icons only)
- Down from 6 MB originally (95.7% reduction)
index-CxYYPpoy.js: 4 KB (0.74 KB)
- Entry point

Total Size:

Minified: 12.9 MB
Gzipped: 3.28 MB (what users actually download)

Bundle Analyzer

rollup-plugin-visualize installed as a dev dependency
run yarn build:analyze and open dist/stats.html

Risks

certain Phosphor icons not loading
→ Mitigation: npm run validate-bundle
chunking fails
→ Mitigation: added datahub-web-react/src/__tests__/bundle-optimization.test.ts
merge issues (acryl-main does chunking already but a bit differently)

Reference

https://www.notion.so/acryldata/DataHub-Frontend-Performance-Tech-Plan-246fc6a64277803e9976fdde565602d8

alwaysmeticulous · 2026-02-24T20:48:42Z

🔴 Meticulous spotted visual differences in 255 of 1652 screens tested: view and approve differences detected.

Meticulous evaluated ~9 hours of user flows against your PR.

_{Last updated for commit d9df3a9. This comment will update as new commits are pushed.}

codecov · 2026-02-24T20:51:39Z

Bundle Report

Changes will decrease total bundle size by 5.83MB (-19.7%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
datahub-react-web-esm	23.78MB	-5.83MB (-19.7%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: datahub-react-web-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`assets/index-*.js`	-5.83MB	13.61MB	-30.01%

Files in assets/index-*.js:

./src/alchemy-components/components/Drawer/Drawer.tsx → Total Size: 1.27kB
./src/alchemy-components/components/Alert/Alert.tsx → Total Size: 1.67kB
./src/alchemy-components/components/Editor/extensions/fileDragDrop/FileNodeView.tsx → Total Size: 5.85kB
./src/alchemy-components/components/FileNode/FileIcon.tsx → Total Size: 321 bytes
./src/alchemy-components/components/EmptyState/EmptyState.tsx → Total Size: 1.6kB
./src/alchemy-components/components/Avatar/Avatar.tsx → Total Size: 1.5kB
./src/alchemy-components/components/Editor/toolbar/Toolbar.tsx → Total Size: 4.93kB
./src/alchemy-components/components/Editor/toolbar/AddLinkButton.tsx → Total Size: 683 bytes
./src/alchemy-components/components/Editor/toolbar/AddImageButton.tsx → Total Size: 1.84kB
./src/alchemy-components/components/FileNode/FileNode.tsx → Total Size: 2.74kB
./src/alchemy-components/components/DatePicker/variants/common/components.tsx → Total Size: 423 bytes
./src/alchemy-components/components/Editor/toolbar/AddImageButtonV2.tsx → Total Size: 2.84kB
./src/alchemy-components/components/FileNode/utils.ts → Total Size: 914 bytes
./src/alchemy-components/components/Icon/Icon.tsx → Total Size: 746 bytes
./src/alchemy-components/components/Breadcrumb/Breadcrumb.tsx → Total Size: 1.64kB
./src/alchemy-components/components/FileDragAndDropArea/FileDragAndDropArea.tsx → Total Size: 3.28kB
./src/alchemy-components/components/Card/Card.tsx → Total Size: 2.72kB

codecov · 2026-02-24T21:05:42Z

Codecov Report

❌ Patch coverage is 68.64407% with 37 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...hub-web-react/src/app/ingestV2/executions/utils.ts	26.31%	28 Missing ⚠️
...rc/alchemy-components/components/FileNode/utils.ts	88.88%	4 Missing ⚠️
...ct/src/alchemy-components/components/Icon/types.ts	0.00%	1 Missing ⚠️
...t/src/alchemy-components/components/Pills/types.ts	0.00%	1 Missing ⚠️
.../src/alchemy-components/components/Switch/types.ts	0.00%	1 Missing ⚠️
...rc/alchemy-components/components/TextArea/types.ts	0.00%	1 Missing ⚠️
datahub-web-react/src/app/homeV3/modules/types.ts	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

AdrianMachado · 2026-02-24T21:46:55Z

@benjiaming I scanned through meticulous and here are the classes of errors I found

Icons appearing where they were not before
Icons disappearing where they were before
Arrow, X, three-dot, and trash icons seem to have switched. Maybe they were using different icons entirely before, or maybe just the size and weight changed, hard to tell

Claude can probably audit based on some of the surfaces mentioned below:

Error	Before	After
Column Sort Icon changed (gained some weight lol)
Plus icon also grew
We gained Icons on the tags menu? I like it tho
Lost thickness on tags 3-dot
We lost icons on the glossary menu
Went from outline to filled on owners icons
Structured property icons changed size
Also on structured properties, info icon thickness change
Trash icon totally changed on "create a view" modal

AdrianMachado · 2026-02-24T21:52:17Z

+            return FilePdf;
        case 'doc':
        case 'docx':
-            return 'FileWord';


I think you find a legit case of missing icons

annadoesdesign

approving with the caveat carets will be updated sizing

AdrianMachado · 2026-03-17T23:17:46Z

Take a peek at the meticulous run for what Anna reject and please address before merging

benjiaming · 2026-03-17T23:31:12Z

Take a peek at the meticulous run for what Anna reject and please address before merging

Addressing those as fast follow.

Align with tree-shaking changes from #16338 — Icon component now accepts React.ComponentType instead of string names with source prop. Made-with: Cursor

Update Phosphor icon usage in group identity components to pass direct component references instead of string literals, aligning with the new Icon API from #16338. Made-with: Cursor

Update Phosphor icon usage in ownership components to pass direct component references instead of string literals, aligning with the new Icon API from #16338. Made-with: Cursor

…r dependency Merge master (includes tree-shaking PR #16338). Resolve conflict in ActorsSearchSelect by keeping dataTestId prop and adopting master's DEFAULT_ACTOR_TYPES rename. Fix FileIcon.tsx circular dependency that caused GlossaryTermHeader tests to fail — replace Icon wrapper with direct Phosphor component usage to avoid barrel import cycle. Made-with: Cursor

Conflicts resolved by Claude AI. Merged from commit cdb1ba7 Original author: Ben Blazke <benjiaming@users.noreply.github.com>

github-actions Bot added the product PR or Issue related to the DataHub UI/UX label Feb 24, 2026

github-actions Bot deployed to datahub-project-web-react (Preview) February 24, 2026 20:47 View deployment

vercel Bot deployed to Preview February 24, 2026 20:57 View deployment

datahub-cyborg Bot added the needs-review Label for PRs that need review from a maintainer. label Feb 24, 2026

datahub-cyborg Bot added pending-submitter-response Issue/request has been reviewed but requires a response from the submitter and removed needs-review Label for PRs that need review from a maintainer. labels Feb 24, 2026

AdrianMachado reviewed Feb 24, 2026

View reviewed changes

github-actions Bot deployed to datahub-project-web-react (Preview) February 26, 2026 21:47 View deployment

vercel Bot deployed to Preview February 26, 2026 21:59 View deployment

github-actions Bot deployed to datahub-project-web-react (Preview) February 27, 2026 18:18 View deployment

datahub-cyborg Bot added needs-review Label for PRs that need review from a maintainer. and removed pending-submitter-response Issue/request has been reviewed but requires a response from the submitter labels Feb 27, 2026

annadoesdesign mentioned this pull request Feb 27, 2026

refactor(ui): migrate alchemy Icon component to Phosphor and enforce semantic color tokens CAT-1559 #16389

Closed

4 tasks

vercel Bot deployed to Preview February 27, 2026 18:29 View deployment

vercel Bot deployed to Preview March 5, 2026 19:03 View deployment

benjiaming force-pushed the CAT-1335-refactor-icon branch from 8ee3a46 to 4fabdbf Compare March 5, 2026 20:30

vercel Bot deployed to Preview March 5, 2026 20:46 View deployment

benjiaming added 4 commits March 5, 2026 12:47

CAT-1335: tree shake phosphor icons

7788d6f

icons

2543f53

cleanup

8afb59a

conflicts

67c42a8

benjiaming force-pushed the CAT-1335-refactor-icon branch from 4fabdbf to 67c42a8 Compare March 5, 2026 20:54

github-actions Bot deployed to datahub-project-web-react (Preview) March 5, 2026 20:59 View deployment

vercel Bot deployed to Preview March 5, 2026 21:10 View deployment

conflict resolution

e02a092

github-actions Bot deployed to datahub-project-web-react (Preview) March 10, 2026 21:10 View deployment

vercel Bot deployed to Preview March 13, 2026 23:48 View deployment

Merge branch 'master' into CAT-1335-refactor-icon

4c94f89

github-actions Bot deployed to datahub-project-web-react (Preview) March 14, 2026 00:06 View deployment

vercel Bot had a problem deploying to Preview March 14, 2026 00:09 Failure

ci

067ce4f

github-actions Bot deployed to datahub-project-web-react (Preview) March 17, 2026 20:23 View deployment

vercel Bot had a problem deploying to Preview March 17, 2026 20:25 Failure

benjiaming added 2 commits March 17, 2026 15:32

ci

b288d7b

Merge remote-tracking branch 'oss/master' into CAT-1335-refactor-icon

ed3b894

github-actions Bot deployed to datahub-project-web-react (Preview) March 17, 2026 22:41 View deployment

vercel Bot deployed to Preview March 17, 2026 22:53 View deployment

annadoesdesign approved these changes Mar 17, 2026

View reviewed changes

ci

9b1f807

AdrianMachado approved these changes Mar 17, 2026

View reviewed changes

github-actions Bot deployed to datahub-project-web-react (Preview) March 17, 2026 23:20 View deployment

benjiaming enabled auto-merge (squash) March 17, 2026 23:30

vercel Bot deployed to Preview March 17, 2026 23:32 View deployment

Merge branch 'master' into CAT-1335-refactor-icon

d9df3a9

github-actions Bot deployed to datahub-project-web-react (Preview) March 18, 2026 02:56 View deployment

vercel Bot deployed to Preview March 18, 2026 03:07 View deployment

benjiaming merged commit cdb1ba7 into master Mar 18, 2026
30 of 32 checks passed

benjiaming deleted the CAT-1335-refactor-icon branch March 18, 2026 03:17

benjiaming mentioned this pull request May 21, 2026

CAT-1335: tree shake phosphor and chunk #16160

Closed

david-leifker pushed a commit that referenced this pull request May 27, 2026

Merge cdb1ba7: CAT-1335: tree shake phosphor icons (#16338)

1b19ed5

Conflicts resolved by Claude AI. Merged from commit cdb1ba7 Original author: Ben Blazke <benjiaming@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

CAT-1335: tree shake phosphor icons#16338

CAT-1335: tree shake phosphor icons#16338
benjiaming merged 28 commits into
masterfrom
CAT-1335-refactor-icon

benjiaming commented Feb 24, 2026 •

edited

Loading

Uh oh!

alwaysmeticulous Bot commented Feb 24, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Feb 24, 2026 •

edited

Loading

Assets Changed:

Uh oh!

codecov Bot commented Feb 24, 2026 •

edited

Loading

Uh oh!

AdrianMachado commented Feb 24, 2026

Uh oh!

AdrianMachado Feb 24, 2026

Uh oh!

annadoesdesign left a comment

Uh oh!

AdrianMachado commented Mar 17, 2026

Uh oh!

benjiaming commented Mar 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

benjiaming commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary: Phase 1 of FE performance optimizations

Results

Before

After

Bundle Analyzer

Risks

Reference

Uh oh!

alwaysmeticulous Bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

codecov Bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

AdrianMachado commented Feb 24, 2026

Uh oh!

AdrianMachado Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

annadoesdesign left a comment

Choose a reason for hiding this comment

Uh oh!

AdrianMachado commented Mar 17, 2026

Uh oh!

benjiaming commented Mar 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

benjiaming commented Feb 24, 2026 •

edited

Loading

alwaysmeticulous Bot commented Feb 24, 2026 •

edited

Loading

codecov Bot commented Feb 24, 2026 •

edited

Loading

codecov Bot commented Feb 24, 2026 •

edited

Loading