Improve bundle size optimization

frontend/src/App.tsx

@@ -1,17 +1,19 @@
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { ElectronTitleBar } from "./Electron";
 import { useAppState } from "./pages/chat/state";
-import { useEffect, useState } from "react";
+import { useEffect, useState, lazy, Suspense } from "react";
-import HomePage from "./pages/home/HomePage";
-import LoginPage from "./pages/auth/LoginPage";
-import RegisterPage from "./pages/auth/RegisterPage";
-import ChatPage from "./pages/chat/ui/ChatPage";
-import DownloadAppPage from "./pages/download-app/DownloadAppPage";
-import NotFoundPage from "./pages/not-found/NotFoundPage";
-import ProtectedRoute from "./pages/ProtectedRoute";
 import { isElectron } from "./core/electron/electron";
 import { MINIMUM_WIDTH } from "./core/config";
 import useWindowSize from "./core/hooks/useWindowSize";
+import ProtectedRoute from "./pages/ProtectedRoute";
+import NotFoundPage from "./pages/not-found/NotFoundPage";
+import DownloadAppPage from "./pages/download-app/DownloadAppPage";
+
+// Lazy load route components
+const HomePage = lazy(() => import("./pages/home/HomePage"));
+const LoginPage = lazy(() => import("./pages/auth/LoginPage"));
+const RegisterPage = lazy(() => import("./pages/auth/RegisterPage"));
+const ChatPage = lazy(() => import("./pages/chat/ui/ChatPage"));
 
 export default function App() {
     const { restoreUserFromStorage } = useAppState();
@@ -31,10 +33,24 @@ export default function App() {
             <ElectronTitleBar />
             <div id="main-wrapper">
                 <Routes>
-                    <Route path="/" element={<HomePage />} />
+                    <Route path="/" element={
-                    <Route path="/login" element={<LoginPage />} />
+                        <Suspense>
-                    <Route path="/register" element={<RegisterPage />} />
+                            <HomePage />
-                    <Route path="/download-app" element={<DownloadAppPage />} />
+                        </Suspense>
+                    } />
+                    <Route path="/login" element={
+                        <Suspense>
+                            <LoginPage />
+                        </Suspense>
+                    } />
+                    <Route path="/register" element={
+                        <Suspense>
+                            <RegisterPage />
+                        </Suspense>
+                    } />
+                    <Route path="/download-app" element={
+                        <DownloadAppPage />
+                    } />
                     <Route path="/">
                         <Route path="chat" element={
                             <ProtectedRoute>
@@ -42,7 +58,9 @@ export default function App() {
                             </ProtectedRoute>
                         } />
                     </Route>
-                    <Route path="*" element={<NotFoundPage />} />
+                    <Route path="*" element={
+                        <NotFoundPage />
+                    } />
                 </Routes>
             </div>
         </BrowserRouter>

frontend/src/main.tsx

@@ -6,7 +6,6 @@
  */
 
 import './css/style.scss';
-import "mdui/mdui.css";
 
 import "./utils/material";
 import "./core/init";

frontend/src/utils/material.ts

@@ -21,6 +21,7 @@ import 'mdui/components/top-app-bar';
 import 'mdui/components/top-app-bar-title';
 import 'mdui/components/switch';
 import 'mdui/components/chip';
+import "mdui/mdui.css";
 
 import { setColorScheme } from 'mdui/functions/setColorScheme.js';
 

frontend/vite.config.ts

@@ -4,6 +4,9 @@ import autoprefixer from "autoprefixer";
 import electron from "vite-plugin-electron/simple";
 import react from "@vitejs/plugin-react";
 import path from "path";
+import { visualizer } from 'rollup-plugin-visualizer';
+
+const outDir = process.env.VITE_ELECTRON ? "build/electron/dist" : "build/normal/dist";
 
 const plugins: PluginOption[] = [
     react(),
@@ -18,6 +21,11 @@ const plugins: PluginOption[] = [
             minifyCSS: true,
             minifyJS: true
         }
+    }),
+    visualizer({
+        filename: `${outDir}/stats.html`,
+        open: true,
+        gzipSize: true
     })
 ]
 
@@ -85,7 +93,7 @@ export default defineConfig({
         },
         cssMinify: true,
         assetsInlineLimit: 0,
-        outDir: process.env.VITE_ELECTRON ? "build/electron/dist" : "build/normal/dist",
+        outDir: outDir,
         chunkSizeWarningLimit: 1024
     }
 });

package.json

@@ -1,5 +1,5 @@
 {
-    "name": "FromChat",
+    "name": "fromchat",
     "private": true,
     "version": "0.0.0",
     "type": "module",
@@ -53,6 +53,7 @@
         "electron": "^38.1.2",
         "husky": "^9.1.7",
         "postcss": "^8.5.6",
+        "rollup-plugin-visualizer": "^6.0.4",
         "sass-embedded": "^1.93.0",
         "terser": "^5.44.0",
         "typescript": "~5.9.2",