Skip to content

ATLAS-5346: Atlas React UI: Reduce React UI build time and bundle size through Vite optimization and lazy route loading.#698

Merged
pawarprasad123 merged 3 commits into
masterfrom
ATLAS-5346_reduceBuildTime
Jul 17, 2026
Merged

ATLAS-5346: Atlas React UI: Reduce React UI build time and bundle size through Vite optimization and lazy route loading.#698
pawarprasad123 merged 3 commits into
masterfrom
ATLAS-5346_reduceBuildTime

Conversation

@pawarprasad123

Copy link
Copy Markdown
Contributor

What changes were proposed in this pull request?

Optimizes Atlas React UI (dashboard/) production build performance by ~50%, improves bundle splitting with lazy-loaded routes, and streamlines the Maven/npm build pipeline.

  • npm run build wall time: 26.2s → ~12s (~13s / ~50% faster)
  • Router chunk: ~837 KB → ~506 KB
  • 31 files changed: ~2,742 insertions, ~3,599 deletions

Problem

The React UI build was slow because:

  1. Default build ran lineage prebuild (~11.7s) + full tsc (~7.2s) before Vite on every run
  2. Heavy views (Statistics, Entity Detail tabs, Administrator) were eagerly bundled
  3. Maven copied unnecessary artifacts and re-downloaded Node toolchain on each build

Solution

Build pipeline

  • Default npm run build is now vite build only
  • Typecheck separated: npm run typecheck / npm run build:check
  • Lineage build separated: npm run build:lineage / npm run build:legacy
  • Maven builds from dashboard/ module root with persistent .frontend-toolchain/ and npm cache
  • Added .npmrc for faster installs

Vite optimization (vite.config.ts)

  • Manual chunks: react, mui, redux, router, d3, utils
  • reportCompressedSize: false for faster builds
  • Increased chunk size warning limit

Lazy loading

  • Layout.tsx → lazy Statistics
  • EntityDetailPage.tsx → lazy detail tabs (Properties, Schema, Lineage, etc.)
  • AdministratorLayout.tsx → lazy admin sub-views

Code cleanup

  • Removed unused Masonry demo components and standalone LineageLayout from main bundle
  • Refactored Statistics: EntityStatsChart.tsx, statsUtils.tsx

Tooling

  • ESLint 10 flat config (eslint.config.js replaces .eslintrc.cjs)
  • Upgraded Vite 6.4.3, @vitejs/plugin-react-swc 4.3.1
  • tsconfig.build.json excludes tests from production typecheck
  • Platform-specific optional deps for Rollup/esbuild/SWC
  • Updated npm overrides for transitive security pins

Build time comparison

Metric Before After Savings
npm run build total 26.2 s ~12 s ~50%
prebuild (lineage webpack) ~11.7 s Removed
tsc before Vite ~7.2 s Removed (separate script)
Vite bundling ~10.7 s ~11.4 s

Files changed

Build/config: package.json, package-lock.json, vite.config.ts, tsconfig.json, tsconfig.build.json, .npmrc, .gitignore, eslint.config.js, dashboard/pom.xml, pom.xml
Scripts: ensure-lineage-build.mjs, ensure-native-deps.mjs
Views: Layout.tsx, EntityDetailPage.tsx, AdministratorLayout.tsx, Statistics refactor + tests
Removed: Masonry demo, standalone LineageLayout (lineage still via Entity Detail tab)

How was this patch tested?

Manual tested

  • npm run lint — 0 errors (167 warnings, under limit)
  • npm run typecheck — pass
  • npm run build — pass (~11.4s)
  • Unit tests — Layout, EntityDetailPage, AdministratorLayout, EntityStats, Statistics
  • Manual smoke: Entity Detail tabs, Statistics modal, Administrator views, Dashboard charts
  • Maven build: mvn clean install -pl dashboard -am

…e through Vite optimization and lazy route loading
…e through Vite optimization and lazy route loading

 added license for .npmrc and .gitignore file update license for remainig file
…e through Vite optimization and lazy route loading
@pawarprasad123
pawarprasad123 merged commit 11b219f into master Jul 17, 2026
4 checks passed
pawarprasad123 added a commit that referenced this pull request Jul 17, 2026
…e through Vite optimization and lazy route loading. (#698)

* ATLAS-5346: Atlas React UI: Reduce React UI build time and bundle size through Vite optimization and lazy route loading

* ATLAS-5346: Atlas React UI: Reduce React UI build time and bundle size through Vite optimization and lazy route loading

 added license for .npmrc and .gitignore file update license for remainig file

* ATLAS-5346: Atlas React UI: Reduce React UI build time and bundle size through Vite optimization and lazy route loading
 ( cherrypicked form commit 11b219f)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant