fix(admin-ui): admin UI experiences a loading delay due to the large bundle size of a chunk in the production build

[duttarnab]

closes #2318

Implementation Strategy

1. Webpack Configuration

Vendor Library Splitting

• React Ecosystem: react, react-dom, react-router, react-router-dom
• Material-UI: @mui/*, @emotion/*
• Redux: @reduxjs/*, redux, redux-saga, redux-persist
• Charts: recharts, react-ace, ace-builds
• Utilities: lodash, moment, dayjs, axios, formik, yup

Plugin-based Splitting

• Each plugin gets its own chunk
• Dynamic loading of plugin components
• Fallback mechanisms for failed loads

Common Code Splitting

• Shared application code
• Common vendor libraries
• Reusable components

2. Route-based Code Splitting

Lazy Route Loading

// Pre-defined lazy routes
export const LazyRoutes = {
  DashboardPage: createLazyRoute(() => import('../routes/Dashboards/DashboardPage')),
  ProfilePage: createLazyRoute(() => import('../routes/Apps/Profile/ProfilePage')),
  // ... more routes
}

Usage in Routes

<Route
  path="/home/dashboard"
  element={
    <ProtectedRoute>
      <LazyRoutes.DashboardPage />
    </ProtectedRoute>
  }
/>

3. Plugin System Enhancement

Dynamic Plugin Loading

// Async plugin loading
export async function processRoutes() {
  const pluginPromises = plugins.map(async (item) => {
    try {
      const metadata = await import(`${item.metadataFile}`)
      return metadata.default.routes || []
    } catch (error) {
      console.warn(`Failed to load plugin routes: ${item.metadataFile}`, error)
      return []
    }
  })
  // ... handle results
}

Plugin Component Loading

// Dynamic plugin component loading
export const loadPluginComponent = (pluginName: string, componentName: string) => {
  return createLazyComponent(() => 
    import(`../../plugins/${pluginName}/components/${componentName}`)
  )
}

4. Component-based Code Splitting

Large Component Splitting

// Lazy loading for heavy components
export const LazyComponents = {
  MaterialTable: createLazyComponent(() => import('@material-table/core')),
  ReactAce: createLazyComponent(() => import('react-ace')),
  Recharts: createLazyComponent(() => import('recharts')),
  // ... more components
}

Conditional Loading

// Load components only when needed
<ConditionalComponent
  condition={showChart}
  component={LazyComponents.Recharts}
  fallback={<div>Loading chart...</div>}
/>

[sonarqubecloud]

Quality Gate passed for 'Gluu Admin UI'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud