Skip to content

perf(ui-bundle): split reactflow / recharts / rjsf / codemirror into vendor chunks #28016

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
harshach wants to merge 1 commit into
base: main
Choose a base branch
from
Open

perf(ui-bundle): split reactflow / recharts / rjsf / codemirror into vendor chunks #28016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion openmetadata-ui/src/main/resources/ui/src/utils/EdgeStyleUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@
* limitations under the License.
*/
import { Theme } from '@mui/material';
import { Edge } from 'reactflow';
// `Edge` is only used as a parameter type — keep this type-only so the file doesn't drag
// reactflow into whatever chunk imports it.
import type { Edge } from 'reactflow';

export interface EdgeStyle {
stroke: string;
Expand Down
5 changes: 4 additions & 1 deletion openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@ import { isEmpty, isUndefined, lowerCase, startCase } from 'lodash';
import { EntityDetailUnion } from 'Models';
import { Fragment } from 'react';
import { Link } from 'react-router-dom';
import { Node } from 'reactflow';
// Type-only import — `Node` is used solely as a type annotation in this file. A value import
// would force `reactflow` into the eager chunk because EntityUtils.tsx is on the universal
// page-load path (Header, Search, every entity page imports from here).
import type { Node } from 'reactflow';
import { TitleLink } from '../components/common/TitleBreadcrumb/TitleBreadcrumb.interface';
import { DataAssetsWithoutServiceField } from '../components/DataAssets/DataAssetsHeader/DataAssetsHeader.interface';
import { QueryVoteType } from '../components/Database/TableQueries/TableQueries.interface';
Expand Down
3 changes: 2 additions & 1 deletion openmetadata-ui/src/main/resources/ui/src/utils/NodeUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
* limitations under the License.
*/

import { Node } from 'reactflow';
// Type-only — `Node` is used solely as a type annotation here.
import type { Node } from 'reactflow';
import {
CONNECTION_MODAL_RULES,
NODE_TYPE_MAPPINGS,
Expand Down
35 changes: 35 additions & 0 deletions openmetadata-ui/src/main/resources/ui/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,41 @@ export default defineConfig(({ mode }) => {
if (id.includes('@untitledui/icons')) {
return 'vendor-untitled-icons';
}
// Heavy tab-specific libraries split into named vendor chunks. Without these
// explicit rules Rollup's auto-chunking lumped reactflow, recharts, rjsf,
// react-grid-layout, and codemirror into a single ~8.87 MB grab-bag chunk
// (named after the first lazy entry to pull them in). Splitting them here
// gives each library its own cacheable chunk so the browser can fetch them
// in parallel and skip the ones a given page doesn't use.
// `reactflow` is a meta-package that re-exports from `@reactflow/*` sub-packages
// (core, background, controls, minimap, node-resizer, node-toolbar). The heavy
// code lives in @reactflow/core, so we need to match both prefixes — matching
// only `node_modules/reactflow` misses the bulk of the bytes.
if (
id.includes('node_modules/reactflow') ||
id.includes('node_modules/@reactflow')
) {
return 'vendor-reactflow';
}
if (
id.includes('node_modules/recharts') ||
id.includes('node_modules/d3-')
) {
return 'vendor-recharts';
}
Comment on lines +221 to +226
Copy link
Copy Markdown

@gitar-bot gitar-bot Bot May 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Performance: Grouping all d3-* into vendor-recharts creates unwanted coupling

The rule id.includes('node_modules/d3-') assigns all d3 sub-packages to vendor-recharts. However, @reactflow/core depends on d3-zoom, d3-selection, and d3-drag. In a typical hoisted node_modules layout, these resolve to node_modules/d3-zoom/... (not nested under @reactflow/), so they won't match the reactflow rule — they'll land in vendor-recharts.

This means loading the Lineage tab (which uses reactflow but not recharts) will force the browser to also download and parse vendor-recharts just for the three d3 modules reactflow needs. This partially defeats the goal of independent, parallel-fetchable chunks.

Suggested fix: Either create a separate vendor-d3 chunk for shared d3 packages, or narrow the recharts rule to only match recharts-specific d3 packages (d3-shape, d3-scale, d3-interpolate, d3-path, d3-color, d3-format, d3-time, d3-time-format, d3-array), leaving reactflow's d3 deps (d3-zoom, d3-selection, d3-drag, d3-transition, d3-dispatch, d3-ease, d3-timer) to either fall into vendor-reactflow via explicit matching or remain in a shared chunk.

Suggested fix:

if (
  id.includes('node_modules/recharts') ||
  id.includes('node_modules/d3-shape') ||
  id.includes('node_modules/d3-scale') ||
  id.includes('node_modules/d3-interpolate') ||
  id.includes('node_modules/d3-path') ||
  id.includes('node_modules/d3-array')
) {
  return 'vendor-recharts';
}
if (id.includes('node_modules/d3-')) {
  return 'vendor-d3';
}
  • Apply suggested fix

Check the box to apply the fix or reply for a change | Was this helpful? React with 👍 / 👎

if (id.includes('node_modules/react-grid-layout')) {
return 'vendor-grid-layout';
}
if (id.includes('node_modules/@rjsf')) {
return 'vendor-rjsf';
}
if (
id.includes('node_modules/codemirror') ||
id.includes('node_modules/@codemirror') ||
id.includes('node_modules/@uiw/react-codemirror')
) {
return 'vendor-codemirror';
}
}
},
},
Expand Down
Loading