Refactor code splitting and optimize chunk loading in Vite config

openmetadata-ui/pom.xml

@@ -152,6 +152,7 @@
               <!--arguments>build</arguments-->
               <environmentVariables>
                 <NODE_OPTIONS>--max-old-space-size=${node.heap.size}</NODE_OPTIONS>
+                <APP_VERSION>${project.version}</APP_VERSION>
               </environmentVariables>
             </configuration>
           </execution>

openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx

@@ -12,24 +12,49 @@
  */
 
 import { isEmpty, isNil } from 'lodash';
-import { useCallback, useEffect } from 'react';
+import { lazy, useCallback, useEffect } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { useAnalytics } from 'use-analytics';
 import { useShallow } from 'zustand/react/shallow';
 import { ROUTES } from '../../constants/constants';
 import { CustomEventTypes } from '../../generated/analytics/webAnalyticEventData';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
 import useCustomLocation from '../../hooks/useCustomLocation/useCustomLocation';
-import AccessNotAllowedPage from '../../pages/AccessNotAllowedPage/AccessNotAllowedPage';
-import { LogoutPage } from '../../pages/LogoutPage/LogoutPage';
-import PageNotFound from '../../pages/PageNotFound/PageNotFound';
-import SamlCallback from '../../pages/SamlCallback';
-import SignUpPage from '../../pages/SignUp/SignUpPage';
 import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase';
-import AppContainer from '../AppContainer/AppContainer';
 import Loader from '../common/Loader/Loader';
 import { useApplicationsProvider } from '../Settings/Applications/ApplicationsProvider/ApplicationsProvider';
 import { RoutePosition } from '../Settings/Applications/plugins/AppPlugin';
+import withSuspenseFallback from './withSuspenseFallback';
+
+// Lazy-load the entire authenticated shell so login page users never download it
+const AppContainer = withSuspenseFallback(
+  lazy(() => import('../AppContainer/AppContainer'))
+);
+
+// Lazy-load infrequently-visited unauthenticated pages
+const AccessNotAllowedPage = withSuspenseFallback(
+  lazy(() => import('../../pages/AccessNotAllowedPage/AccessNotAllowedPage'))
+);
+
+const LogoutPage = withSuspenseFallback(
+  lazy(() =>
+    import('../../pages/LogoutPage/LogoutPage').then((m) => ({
+      default: m.LogoutPage,
+    }))
+  )
+);
+
+const PageNotFound = withSuspenseFallback(
+  lazy(() => import('../../pages/PageNotFound/PageNotFound'))
+);
+
+const SamlCallback = withSuspenseFallback(
+  lazy(() => import('../../pages/SamlCallback'))
+);
+
+const SignUpPage = withSuspenseFallback(
+  lazy(() => import('../../pages/SignUp/SignUpPage'))
+);
 
 const AppRouter = () => {
   const location = useCustomLocation();

openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AuthenticatedAppRouter.tsx

@@ -21,65 +21,64 @@ import {
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
 import { ResourceEntity } from '../../context/PermissionProvider/PermissionProvider.interface';
 import { Operation } from '../../generated/entity/policies/policy';
-import AddCustomMetricPage from '../../pages/AddCustomMetricPage/AddCustomMetricPage';
-import { CustomizablePage } from '../../pages/CustomizablePage/CustomizablePage';
-import DataQualityPage from '../../pages/DataQuality/DataQualityPage';
-import ForbiddenPage from '../../pages/ForbiddenPage/ForbiddenPage';
-import PlatformLineage from '../../pages/PlatformLineage/PlatformLineage';
-import TagPage from '../../pages/TagPage/TagPage';
 import { checkPermission, userPermissions } from '../../utils/PermissionsUtils';
 import { useApplicationsProvider } from '../Settings/Applications/ApplicationsProvider/ApplicationsProvider';
 import { RoutePosition } from '../Settings/Applications/plugins/AppPlugin';
 import AdminProtectedRoute from './AdminProtectedRoute';
 import withSuspenseFallback from './withSuspenseFallback';
 
-const DomainRouter = withSuspenseFallback(
+// Previously statically imported — lazify so they stay out of the main chunk
+const AddCustomMetricPage = withSuspenseFallback(
   React.lazy(
-    () => import(/* webpackChunkName: "DomainRouter" */ './DomainRouter')
+    () => import('../../pages/AddCustomMetricPage/AddCustomMetricPage')
   )
 );
-const DataProductListPage = withSuspenseFallback(
-  React.lazy(
-    () =>
-      import(
-        /* webpackChunkName: "DataProductListPage" */ '../DataProduct/DataProductListPage'
-      )
+
+const CustomizablePage = withSuspenseFallback(
+  React.lazy(() =>
+    import('../../pages/CustomizablePage/CustomizablePage').then((m) => ({
+      default: m.CustomizablePage,
+    }))
   )
 );
+
+const DataQualityPage = withSuspenseFallback(
+  React.lazy(() => import('../../pages/DataQuality/DataQualityPage'))
+);
+
+const ForbiddenPage = withSuspenseFallback(
+  React.lazy(() => import('../../pages/ForbiddenPage/ForbiddenPage'))
+);
+
+const PlatformLineage = withSuspenseFallback(
+  React.lazy(() => import('../../pages/PlatformLineage/PlatformLineage'))
+);
+
+const TagPage = withSuspenseFallback(
+  React.lazy(() => import('../../pages/TagPage/TagPage'))
+);
+
+const DomainRouter = withSuspenseFallback(
+  React.lazy(() => import('./DomainRouter'))
+);
+const DataProductListPage = withSuspenseFallback(
+  React.lazy(() => import('../DataProduct/DataProductListPage'))
+);
 const SettingsRouter = withSuspenseFallback(
-  React.lazy(
-    () => import(/* webpackChunkName: "SettingsRouter" */ './SettingsRouter')
-  )
+  React.lazy(() => import('./SettingsRouter'))
 );
 const EntityRouter = withSuspenseFallback(
-  React.lazy(
-    () => import(/* webpackChunkName: "EntityRouter" */ './EntityRouter')
-  )
+  React.lazy(() => import('./EntityRouter'))
 );
 const ClassificationRouter = withSuspenseFallback(
-  React.lazy(
-    () =>
-      import(
-        /* webpackChunkName: "ClassificationRouter" */ './ClassificationRouter'
-      )
-  )
+  React.lazy(() => import('./ClassificationRouter'))
 );
 const GlossaryRouter = withSuspenseFallback(
-  React.lazy(
-    () =>
-      import(
-        /* webpackChunkName: "GlossaryRouter" */ './GlossaryRouter/GlossaryRouter'
-      )
-  )
+  React.lazy(() => import('./GlossaryRouter/GlossaryRouter'))
 );
 
 const GlossaryTermRouter = withSuspenseFallback(
-  React.lazy(
-    () =>
-      import(
-        /* webpackChunkName: "GlossaryTermRouter" */ './GlossaryTermRouter/GlossaryTermRouter'
-      )
-  )
+  React.lazy(() => import('./GlossaryTermRouter/GlossaryTermRouter'))
 );
 
 const MyDataPage = withSuspenseFallback(

openmetadata-ui/src/main/resources/ui/src/components/AppRouter/UnAuthenticatedAppRouter.tsx

@@ -18,10 +18,7 @@ import { ROUTES } from '../../constants/constants';
 import { AuthProvider } from '../../generated/configuration/authenticationConfiguration';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
 import useCustomLocation from '../../hooks/useCustomLocation/useCustomLocation';
-import PageNotFound from '../../pages/PageNotFound/PageNotFound';
-import AccountActivationConfirmation from '../../pages/SignUp/account-activation-confirmation.component';
 import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase';
-import Auth0Callback from '../Auth/AppCallbacks/Auth0Callback/Auth0Callback';
 import withSuspenseFallback from './withSuspenseFallback';
 
 const SigninPage = withSuspenseFallback(
@@ -40,6 +37,18 @@ const BasicSignupPage = withSuspenseFallback(
   lazy(() => import('../../pages/SignUp/BasicSignup.component'))
 );
 
+const PageNotFound = withSuspenseFallback(
+  lazy(() => import('../../pages/PageNotFound/PageNotFound'))
+);
+
+const AccountActivationConfirmation = withSuspenseFallback(
+  lazy(() => import('../../pages/SignUp/account-activation-confirmation.component'))
+);
+
+const Auth0Callback = withSuspenseFallback(
+  lazy(() => import('../Auth/AppCallbacks/Auth0Callback/Auth0Callback'))
+);
+
 export const UnAuthenticatedAppRouter = () => {
   const location = useCustomLocation();
   const { authConfig, isSigningUp } = useApplicationStore(

openmetadata-ui/src/main/resources/ui/src/components/common/ErrorBoundary/ErrorFallback.tsx

@@ -27,7 +27,13 @@ const ErrorFallback: React.FC<FallbackProps> = ({
 }) => {
   const navigate = useNavigate();
 
-  const isChunkLoadError = error.message?.startsWith('Loading chunk');
+  const isChunkLoadError =
+    error?.name === 'ChunkLoadError' ||
+    error.message?.startsWith('Loading chunk') || // Legacy Webpack
+    error.message
+      ?.toLowerCase()
+      .includes('failed to fetch dynamically imported module') || // Vite
+    error.message?.toLowerCase().includes('importing a module script failed'); // Vite (Safari)
 
   const message = isChunkLoadError
     ? t('message.please-refresh-the-page')