Performance: Code-Splitting pro Seite, KI-Chat lazy, Bilder als WebP (Einstieg 1071->285 kB)

src/App.tsx

@@ -1,22 +1,25 @@
 import { Routes, Route, Navigate } from 'react-router'
-import { Component, type ReactNode } from 'react'
+import { Component, Suspense, lazy, type ReactNode } from 'react'
 import { StoreProvider, useStore } from './store/store'
 import AppLayout from './components/AppLayout'
 import Login from './pages/Login'
-import Dashboard from './pages/Dashboard'
-import Payments from './pages/Payments'
-import Tickets from './pages/Tickets'
-import Documents from './pages/Documents'
-import Messages from './pages/Messages'
-import Zaehler from './pages/Zaehler'
-import Kosten from './pages/Kosten'
-import Bestand from './pages/Bestand'
-import Mietvertraege from './pages/Mietvertraege'
-import MieterVerwaltung from './pages/MieterVerwaltung'
-import Assistent from './pages/Assistent'
-import BenutzerVerwaltung from './pages/BenutzerVerwaltung'
-import Profil from './pages/Profil'
-import Anleitung from './pages/Anleitung'
+
+// Seiten werden beim ersten Aufruf nachgeladen (Code-Splitting) –
+// Verwaltungsmodule landen nicht im Bundle der Mieter.
+const Dashboard = lazy(() => import('./pages/Dashboard'))
+const Payments = lazy(() => import('./pages/Payments'))
+const Tickets = lazy(() => import('./pages/Tickets'))
+const Documents = lazy(() => import('./pages/Documents'))
+const Messages = lazy(() => import('./pages/Messages'))
+const Zaehler = lazy(() => import('./pages/Zaehler'))
+const Kosten = lazy(() => import('./pages/Kosten'))
+const Bestand = lazy(() => import('./pages/Bestand'))
+const Mietvertraege = lazy(() => import('./pages/Mietvertraege'))
+const MieterVerwaltung = lazy(() => import('./pages/MieterVerwaltung'))
+const Assistent = lazy(() => import('./pages/Assistent'))
+const BenutzerVerwaltung = lazy(() => import('./pages/BenutzerVerwaltung'))
+const Profil = lazy(() => import('./pages/Profil'))
+const Anleitung = lazy(() => import('./pages/Anleitung'))
 
 /** Fängt Render-Fehler ab – statt schwarzem Bildschirm: Hinweis + Reload. */
 class FehlerGrenze extends Component<{ children: ReactNode }, { fehler: boolean }> {
@@ -76,6 +79,7 @@ export default function App() {
   return (
     <FehlerGrenze>
       <StoreProvider>
+        <Suspense fallback={<Ladebildschirm />}>
         <Routes>
         <Route path="/login" element={<LoginGate />} />
         <Route
@@ -102,6 +106,7 @@ export default function App() {
         </Route>
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
+        </Suspense>
       </StoreProvider>
     </FehlerGrenze>
   )