Skip to content

[Improve][UI] Reduce seatunnel-engine-ui node_modules size (~90 MB)#10973

Open
davidzollo wants to merge 1 commit into
apache:devfrom
davidzollo:improve/reduce-engine-ui-node-modules
Open

[Improve][UI] Reduce seatunnel-engine-ui node_modules size (~90 MB)#10973
davidzollo wants to merge 1 commit into
apache:devfrom
davidzollo:improve/reduce-engine-ui-node-modules

Conversation

@davidzollo
Copy link
Copy Markdown
Contributor

Purpose

The seatunnel-engine-ui module's node_modules directory has grown to 388 MB, with several packages either unused, miscategorised, or replaceable with lighter alternatives. This PR addresses the root causes.

Changes

1. Remove unused direct dependencies

  • date-fns-tz (572 KB) — declared in dependencies but never imported anywhere in the source code.
  • date-fns (36 MB) — only used for a single parse() call in detail.tsx. Replaced with native new Date(str.replace(' ', 'T')), which handles the yyyy-MM-dd HH:mm:ss format produced by the SeaTunnel backend.

2. Replace @vicons/ionicons5 (33 MB) with inline SVG components

  • The package ships 2,672 files but only 4 icons were used: DesktopOutline, ListOutline, PeopleOutline, PersonOutline.
  • Added src/components/icons/index.ts containing the four icons as lightweight Vue components (SVG paths copied verbatim from the original package source).
  • Updated sidebar/index.tsx to import from the local file.

3. Replace sass-embedded with sass in devDependencies

  • sass-embedded pulled in colorjs.io (8 MB) and rxjs (11 MB) as transitive dependencies.
  • The plain sass package (JavaScript implementation, same API) has no such transitive overhead and is fully compatible with the project's SCSS files.

4. Move build-time tools to devDependencies

  • tailwindcss, postcss, autoprefixer were incorrectly placed in dependencies (runtime). Moved to devDependencies (build-time only). This also enables future CI optimisation with npm install --omit=dev.

Estimated savings

Change Saved
Remove date-fns + date-fns-tz ~36 MB
Remove @vicons/ionicons5 ~33 MB
sass vs sass-embedded chain ~20 MB
Total ~90 MB

Verification

  • npm install — clean install succeeds ✓
  • npm run build-only — Vite production build succeeds with 3,151 modules transformed ✓

- Remove unused direct dependency: date-fns-tz (not imported anywhere)
- Replace date-fns parse() with native Date parsing in detail.tsx,
  removing the 36 MB date-fns package as a direct dependency
- Replace @vicons/ionicons5 (33 MB, 2672 files) with four inline SVG
  components in src/components/icons/index.ts; only 4 icons were used
- Replace sass-embedded with sass in devDependencies, eliminating the
  colorjs.io (8 MB) and rxjs (11 MB) transitive dependency chain
- Move tailwindcss, postcss, autoprefixer from dependencies to
  devDependencies (they are build-time tools, not runtime deps)

Estimated node_modules reduction: ~90 MB
@nzw921rx
Copy link
Copy Markdown
Collaborator

+1 if ci pass

@github-actions github-actions Bot added the Zeta label May 28, 2026
Copy link
Copy Markdown
Contributor

@DanielLeens DanielLeens left a comment

Choose a reason for hiding this comment

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

Thanks for the cleanup here. I reviewed the full current head from the actual runtime path instead of only checking package.json.

What this PR fixes

  • User pain: seatunnel-engine-ui carries more Node runtime/install weight than it needs for the code paths that are actually used.
  • Proposed fix: move build-only packages to devDependencies, remove no-longer-used runtime packages, replace the sidebar icon dependency with local SVG components, and simplify the job-detail time parsing path.
  • One-line summary: the latest head looks coherent to me, and I do not see a source-level blocker in the UI path.

Call chain I traced

npm install
  -> runtime deps only keep real runtime packages
  -> build-only deps move to devDependencies

sidebar render
  -> src/layouts/main/sidebar/index.tsx
     -> imports local icons from src/components/icons/index.ts
     -> Naive UI renders the SVG components

job detail page
  -> getJobInfo(jobId)
  -> res.createTime like "yyyy-MM-dd HH:mm:ss"
  -> new Date(res.createTime.replace(' ', 'T'))
  -> getRemainTime(...)

Findings

  • I did not find any remaining direct source usage of @vicons/ionicons5, date-fns, or date-fns-tz in the UI code path touched by this PR.
  • The local icon replacement is narrow and self-contained.
  • The createTime parsing change keeps the same local-time interpretation that the previous date-fns parse(...) path had for this input shape.

CI status

The current Build is still red, but the failing lanes I found are backend / integration lanes such as:

  • unit-test (8, ubuntu-latest)
  • all-connectors-it-5
  • all-connectors-it-7
  • kafka-connector-it
  • rocketmq-connector-it
  • transform-v2-it-part-1

At the same time, Build SeaTunnel UI is skipped on this run. So based on the current evidence, I do not see a source-level reason to block this UI dependency cleanup itself.

Merge conclusion

Conclusion: can merge.

Must fix before merge

  • No new source-level blocker from me on the latest head.

Keep an eye on

  • The remaining red Build lanes above still need to be cleared at the PR level, but I do not have an additional code-path blocker to add from this diff.

Nice scope control on this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants