Split bundle to chunks

frontend/vite.config.js

@@ -25,6 +25,58 @@ export default defineConfig(({ mode }) => ({
       input: {
         main: path.resolve(__dirname, 'src/index.html'),
       },
+      output: {
+        manualChunks: {
+          // React core libraries
+          'react-core': ['react', 'react-dom'],
+
+          // Mantine UI components and related
+          mantine: [
+            '@mantine/core',
+            '@mantine/hooks',
+            '@mantine/modals',
+            '@mantine/notifications',
+          ],
+
+          // Editor related packages
+          editor: [
+            'codemirror',
+            '@codemirror/commands',
+            '@codemirror/lang-markdown',
+            '@codemirror/state',
+            '@codemirror/theme-one-dark',
+            '@codemirror/view',
+          ],
+
+          // Markdown processing
+          markdown: [
+            'react-markdown',
+            'react-syntax-highlighter',
+            'rehype-katex',
+            'remark-math',
+            'katex',
+          ],
+
+          // Icons and utilities
+          utils: [
+            '@tabler/icons-react',
+            '@react-hook/resize-observer',
+            'react-arborist',
+          ],
+        },
+        // Optimize chunk naming for better caching
+        chunkFileNames: (chunkInfo) => {
+          const name = chunkInfo.name;
+          if (name === 'react-core') return 'assets/react.[hash].js';
+          if (name === 'mantine') return 'assets/mantine.[hash].js';
+          if (name === 'editor') return 'assets/editor.[hash].js';
+          if (name === 'markdown') return 'assets/markdown.[hash].js';
+          if (name === 'utils') return 'assets/utils.[hash].js';
+          return 'assets/[name].[hash].js';
+        },
+        // Optimize asset naming
+        assetFileNames: 'assets/[name].[hash][extname]',
+      },
     },
   },
 
@@ -67,4 +119,16 @@ export default defineConfig(({ mode }) => ({
     },
     extensions: ['.js', '.jsx', '.json'],
   },
+
+  // Add performance optimization options
+  optimizeDeps: {
+    include: [
+      'react',
+      'react-dom',
+      '@mantine/core',
+      '@mantine/hooks',
+      'codemirror',
+      'react-markdown',
+    ],
+  },
 }));