code splitting with lazy

ui/v2/service/src/Routes/home/index.tsx

@@ -1,13 +1,10 @@
 import { RouteObject } from 'react-router-dom'
-import { Component, handle, loader } from './Component'
 
 ////////////////////
 // children routes
 ////////////////////
 
 export default {
   path: '/',
-  Component,
-  handle,
-  loader
+  lazy: () => import('./Component')
 } satisfies RouteObject

ui/v2/service/src/Routes/index.tsx

@@ -1,10 +1,12 @@
+import { RouteObject } from 'react-router-dom'
+
 import HomeRoute from './home'
 import ProjectsRoute from './projects/projectId'
 import ProjectsListRoute from './projectsList'
 
 const homeRoute = {
   ...HomeRoute,
   children: [ProjectsListRoute, ProjectsRoute]
-}
+} satisfies RouteObject
 
 export const Routes = [homeRoute]

ui/v2/service/src/Routes/projects/projectId/dashboard/index.tsx

@@ -1,9 +1,7 @@
 import { RouteObject } from 'react-router-dom'
-import { Component, loader } from './Component'
 
 export default {
   index: true,
   id: 'dashboard',
-  Component,
-  loader
+  lazy: () => import('./Component')
 } satisfies RouteObject

ui/v2/service/src/Routes/projects/projectId/index.tsx

@@ -1,5 +1,4 @@
 import { RouteObject } from 'react-router-dom'
-import { Component, handle, loader } from './Component'
 
 ////////////////////
 // children routes
@@ -12,8 +11,6 @@ import TestSuitesOldRoute from './test_suites'
 
 export default {
   path: 'projects/:projectId',
-  loader,
-  Component,
-  handle,
+  lazy: () => import('./Component'),
   children: [DashboardRoute, ReportsRoute, TestSuitesRoute, TestSuitesOldRoute]
 } satisfies RouteObject

ui/v2/service/src/Routes/projects/projectId/reports/index.tsx

@@ -1,5 +1,4 @@
 import { RouteObject } from 'react-router-dom'
-import { Component, handle, loader } from './Component'
 
 ////////////////////
 // children routes
@@ -10,8 +9,6 @@ import ReportRoute from './reportId'
 export default {
   id: 'reports',
   path: 'reports',
-  loader,
-  Component,
-  handle,
+  lazy: () => import('./Component'),
   children: [ReportRoute]
 } satisfies RouteObject

ui/v2/service/src/Routes/projects/projectId/reports/reportId/index.tsx

@@ -1,10 +1,7 @@
 import { RouteObject } from 'react-router-dom'
-import { Component, handle, loader } from './Component'
 
 export default {
   id: 'show-report-by-id',
   path: ':reportId',
-  Component,
-  loader,
-  handle
+  lazy: () => import('./Component')
 } satisfies RouteObject

ui/v2/service/src/Routes/projects/projectId/test-suites/index.tsx

@@ -1,12 +1,10 @@
 import { RouteObject } from 'react-router-dom'
-import { Component, handle, loader } from './Component'
+
 import TestSuiteRoute from './testSuiteId'
 
 export default {
   id: 'test_suites',
   path: 'test-suites',
-  Component,
-  loader,
-  handle,
+  lazy: () => import('./Component'),
   children: [TestSuiteRoute]
 } satisfies RouteObject

ui/v2/service/src/Routes/projects/projectId/test-suites/testSuiteId/index.tsx

@@ -1,10 +1,7 @@
 import { RouteObject } from 'react-router-dom'
-import { Component, handle, loader } from './Component'
 
 export default {
   id: 'show-test-suite-by-id',
   path: ':testSuiteId',
-  loader,
-  Component,
-  handle
+  lazy: () => import('./Component')
 } satisfies RouteObject

ui/v2/service/src/Routes/projectsList/index.tsx

@@ -1,10 +1,6 @@
 import { RouteObject } from 'react-router-dom'
-import { Component, errorElement, action, loader } from './Component'
 
 export default {
   index: true,
-  loader,
-  action,
-  Component,
-  errorElement
+  lazy: () => import('./Component')
 } satisfies RouteObject

ui/v2/service/vite.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from 'vite'
+import { defineConfig, splitVendorChunkPlugin } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 import react from '@vitejs/plugin-react-swc'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [react(), splitVendorChunkPlugin(), tsconfigPaths()],
   server: {
     port: 3000,
     proxy: {