optimizaiton

frontend/vite.config.ts

@@ -21,46 +21,94 @@ export default defineConfig(({ mode }) => {
     // Optimize dependency pre-bundling
     optimizeDeps: {
       include: [
-        'react-apexcharts',
-        'apexcharts',
+        // Only pre-bundle frequently used, small dependencies
         'clsx',
         'tailwind-merge',
+        'zustand',
+      ],
+      // Exclude heavy dependencies that are only used in specific pages
+      // They will be lazy-loaded when needed
+      exclude: [
+        '@fullcalendar/core',
+        '@fullcalendar/daygrid',
+        '@fullcalendar/interaction',
+        '@fullcalendar/list',
+        '@fullcalendar/react',
+        '@fullcalendar/timegrid',
+        'apexcharts',
+        'react-apexcharts',
+        '@react-jvectormap/core',
+        '@react-jvectormap/world',
+        'react-dnd',
+        'react-dnd-html5-backend',
+        'swiper',
       ],
-      exclude: [], // Don't exclude anything
       esbuildOptions: {
-        // Increase timeout for large dependencies
         target: 'es2020',
       },
     },
     // Build configuration for code splitting
     build: {
+      // Enable minification (esbuild is faster than terser)
+      minify: 'esbuild',
+      // Enable CSS code splitting
+      cssCodeSplit: true,
+      // Optimize chunk size
       rollupOptions: {
         output: {
           // Manual chunk splitting for better code splitting
           manualChunks: (id) => {
-            // Vendor chunks - separate large dependencies
+            // Vendor chunks - separate large dependencies for better caching
             if (id.includes('node_modules')) {
-              // React and React DOM together
-              if (id.includes('react') || id.includes('react-dom') || id.includes('react-router')) {
-                return 'vendor-react';
+              // React core (most critical, always needed)
+              if (id.includes('react/') || id.includes('react-dom/')) {
+                return 'vendor-react-core';
               }
-              // Chart libraries
-              if (id.includes('apexcharts') || id.includes('recharts')) {
+              // React Router (separate chunk - only loads on navigation)
+              if (id.includes('react-router')) {
+                return 'vendor-react-router';
+              }
+              // Heavy chart libraries (only used in specific pages)
+              if (id.includes('apexcharts') || id.includes('react-apexcharts')) {
                 return 'vendor-charts';
               }
-              // UI libraries
+              // Calendar libraries (only used in Calendar page)
+              if (id.includes('@fullcalendar')) {
+                return 'vendor-calendar';
+              }
+              // Map libraries (only used in specific pages)
+              if (id.includes('@react-jvectormap')) {
+                return 'vendor-maps';
+              }
+              // Drag and drop (only used in specific pages)
+              if (id.includes('react-dnd')) {
+                return 'vendor-dnd';
+              }
+              // Swiper (only used in specific pages)
+              if (id.includes('swiper')) {
+                return 'vendor-swiper';
+              }
+              // UI libraries (Radix UI, etc.)
               if (id.includes('@radix-ui') || id.includes('framer-motion')) {
                 return 'vendor-ui';
               }
-              // Other large vendors
-              return 'vendor';
+              // Zustand (state management - used everywhere)
+              if (id.includes('zustand')) {
+                return 'vendor-state';
+              }
+              // React Helmet (SEO)
+              if (id.includes('react-helmet')) {
+                return 'vendor-helmet';
+              }
+              // Other vendors (smaller libraries)
+              return 'vendor-other';
             }
             // Page chunks - each page gets its own chunk
             if (id.includes('/pages/')) {
               const match = id.match(/\/pages\/([^/]+)/);
               if (match) {
                 const pageName = match[1];
-                // Group by module
+                // Group by module for better caching
                 if (pageName === 'Planner' || id.includes('/Planner/')) {
                   return 'pages-planner';
                 }
@@ -80,6 +128,10 @@ export default defineConfig(({ mode }) => {
                 return `page-${pageName.toLowerCase()}`;
               }
             }
+            // Split icons into separate chunk (lazy load)
+            if (id.includes('/icons/') && id.endsWith('.svg')) {
+              return 'icons';
+            }
           },
           // Optimize chunk file names
           chunkFileNames: 'assets/js/[name]-[hash].js',
@@ -88,9 +140,11 @@ export default defineConfig(({ mode }) => {
         },
       },
       // Increase chunk size warning limit (default is 500kb)
-      chunkSizeWarningLimit: 1000,
+      chunkSizeWarningLimit: 600,
       // Enable source maps in dev only
       sourcemap: isDev,
+      // Report compressed sizes
+      reportCompressedSize: true,
     },
     // Only configure server and HMR in development mode
     ...(isDev && {