Merge pull request #399

chore(21125): improve code splitting and loading performance

* chore(21125): add code splitting to the Data Hub extension

* chore(21481): add bundle viz script

* chore(21481): update performance threshold

Author: vanch3d

hivemq-edge/src/frontend/.lighthouserc.cjs

@@ -1,4 +1,4 @@
-const TARGET_PERFORMANCE = 0.85
+const TARGET_PERFORMANCE = 0.95
 const TARGET_ACCESSIBILITY = 1
 const TARGET_BEST_PRACTICE = 1
 const TARGET_SEO = 1

hivemq-edge/src/frontend/package.json

@@ -23,6 +23,7 @@
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui",
+    "bundle:size": "npx vite-bundle-visualizer",
     "preview": "vite preview"
   },
   "dependencies": {

hivemq-edge/src/frontend/src/extensions/datahub/routes.tsx

@@ -1,9 +1,11 @@
+/* eslint-disable react-refresh/only-export-components */
+import { lazy } from 'react'
 import { RouteObject } from 'react-router-dom'
 
-import DataHubPage from './components/DataHubPage.tsx'
-import PropertyPanelController from './components/controls/PropertyPanelController.tsx'
-import DataHubListings from '@datahub/components/pages/DataHubListings.tsx'
-import PolicyEditorLoader from '@datahub/components/pages/PolicyEditorLoader.tsx'
+const DataHubPage = lazy(() => import('@/extensions/datahub/components/DataHubPage.tsx'))
+const PolicyEditorLoader = lazy(() => import('@datahub/components/pages/PolicyEditorLoader.tsx'))
+const DataHubListings = lazy(() => import('@datahub/components/pages/DataHubListings.tsx'))
+const PropertyPanelController = lazy(() => import('@datahub/components/controls/PropertyPanelController.tsx'))
 
 export const dataHubRoutes: RouteObject = {
   path: 'datahub/',

hivemq-edge/src/frontend/src/modules/App/routes.tsx

@@ -2,9 +2,11 @@
 import { lazy } from 'react'
 import { createBrowserRouter } from 'react-router-dom'
 
-import WelcomePage from '@/modules/Welcome/WelcomePage.tsx'
 import LoginPage from '@/modules/Login/LoginPage.tsx'
+import Dashboard from '@/modules/Dashboard/Dashboard.tsx'
+import ErrorPage from '@/modules/App/components/ErrorPage.tsx'
 
+const WelcomePage = lazy(() => import('@/modules/Welcome/WelcomePage.tsx'))
 const BridgePage = lazy(() => import('@/modules/Bridges/BridgePage.tsx'))
 const BridgeEditor = lazy(() => import('@/modules/Bridges/components/panels/BridgeEditor.tsx'))
 const ProtocolAdapterPage = lazy(() => import('@/modules/ProtocolAdapters/ProtocolAdapterPage.tsx'))
@@ -15,14 +17,8 @@ const EdgeFlowPage = lazy(() => import('@/modules/Workspace/EdgeFlowPage.tsx'))
 const NodePanelController = lazy(() => import('@/modules/Workspace/components/controls/NodePanelController.tsx'))
 const EvenLogPage = lazy(() => import('@/modules/EventLog/EvenLogPage.tsx'))
 
-// const DataHubPage = lazy(() => import('@/extensions/datahub/components/DataHubPage.tsx'))
-// const PolicyTable = lazy(() => import('@/extensions/datahub/components/PolicyTable.tsx'))
-
 import { dataHubRoutes } from '@/extensions/datahub/routes.tsx'
 
-import Dashboard from '../Dashboard/Dashboard.tsx'
-import ErrorPage from './components/ErrorPage.tsx'
-
 export const routes = createBrowserRouter(
   [
     {
@@ -89,17 +85,6 @@ export const routes = createBrowserRouter(
           ],
         },
         { ...dataHubRoutes },
-        // {
-        //   path: 'datahub/',
-        //   element: <DataHubPage />,
-        //   children: [
-        //     {
-        //       path: '',
-        //       index: true,
-        //       element: <PolicyTable />,
-        //     },
-        //   ],
-        // },
       ],
     },
     {