Fix lighthouse issues

backend/package.json

@@ -45,9 +45,11 @@
     "vite": "^6.0.3"
   },
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.25.9",
     "eslint-config-airbnb": "^19.0.4",
     "npm-check-updates": "^17.1.11",
     "stylelint": "^16.12.0",
-    "stylelint-config-standard": "^36.0.1"
+    "stylelint-config-standard": "^36.0.1",
+    "terser": "^5.37.0"
   }
 }

backend/vite.config.ts

@@ -1,14 +1,22 @@
+import path from 'node:path'
 import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
-import path from 'node:path'
 
 // https://vitejs.dev/config/
 export default ({ mode }: { mode: string }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') }
 
   return defineConfig({
-    plugins: [react()],
-
+    plugins: [
+      react({
+        // Babel optimizations
+        babel: {
+          plugins: [
+            ['@babel/plugin-transform-runtime'],
+          ]
+        }
+      })
+    ],
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
@@ -21,19 +29,66 @@ export default ({ mode }: { mode: string }) => {
 
     server: {
       host: '0.0.0.0',
-      port: Number.parseInt(process.env.VITE_PORT || '3005', 10),
+      port: Number.parseInt(process.env.VITE_PORT || '3001', 10),
     },
 
     build: {
-      outDir: 'build',
-      target: 'esnext',
+      outDir: 'build', // Output directory
+      target: 'esnext', // Use esnext to ensure the best performance
       modulePreload: true, // Keep modulePreload enabled to ensure the best performance
-      sourcemap: false,
-      minify: 'esbuild', // Use esbuild for fast minification
+      sourcemap: false, // Disable sourcemaps in production
+      cssCodeSplit: true, // Enable CSS code splitting
+
+      // Minification settings (Use terser for minification with aggressive settings)
+      minify: 'terser', // Can also use 'esbuild' which is faster but less optimized
+      terserOptions: {
+        compress: {
+          drop_console: true, // Removes console.* calls
+          drop_debugger: true, // Removes debugger statements
+          dead_code: true, // Removes unreachable code
+          passes: 3, // Number of compression passes
+          unsafe_math: true, // Optimize math expressions
+          conditionals: true, // Optimize if-s and conditional expressions
+          sequences: true, // Join consecutive simple statements using the comma operator
+          booleans: true, // various optimizations for boolean context
+          unused: true, // Drop unreferenced functions and variables
+          if_return: true, // Optimizations for if/return and if/continue
+          join_vars: true, // Join consecutive var statements
+        },
+        format: {
+          comments: false, // Remove comments
+        },
+        mangle: {
+          properties: false // Don't rename properties (safer)
+        }
+      },
+
+      // Control chunk size
+      chunkSizeWarningLimit: 1000, // Warn if a chunk exceeds 1000kb
+
+      // Chunk splitting strategy
       rollupOptions: {
         treeshake: true, // Enable Tree Shaking: Ensure unused code is removed by leveraging ES modules and proper imports
+        output: {
+          // Chunk splitting strategy
+          manualChunks: {
+            vendor: ['react', 'react-dom'],
+            router: ['react-router-dom'],
+          },
+          // Generate chunk names
+          assetFileNames: 'assets/[name]-[hash][extname]',
+          chunkFileNames: 'chunks/[name]-[hash].js',
+          entryFileNames: 'entries/[name]-[hash].js',
+        },
       },
       assetsInlineLimit: 8192, // This reduces the number of small chunk files
     },
+    optimizeDeps: {
+      include: [
+        'react',
+        'react-dom',
+        'react-router-dom',
+      ],
+    },
   })
 }