refactor(vite.config.ts): simplify chunking strategy and enhance Ant Design integration

- Streamlined manual chunking strategy in Vite config to improve React context sharing and Ant Design component loading.
- Increased chunk size warning limit to accommodate larger Ant Design chunks.
- Updated Ant Design imports in `antd-imports.ts` for better tree-shaking and consistent React context availability across components.

worklenz-frontend/src/shared/antd-imports.ts

@@ -1,68 +1,93 @@
 /**
- * Optimized Ant Design imports for maximum tree-shaking
+ * Centralized Ant Design imports for better tree-shaking and React context sharing
  * 
  * This file provides:
- * - Granular imports from antd/es for better tree-shaking
+ * - Consistent imports across the application
- * - Only commonly used components to reduce bundle size
+ * - Better tree-shaking through centralized management
- * - Separate icon imports to avoid loading entire icon set
+ * - Proper React context sharing
  */
 
-// Ensure React is available for Ant Design components
+// Import React to ensure context availability
 import React from 'react';
 
-// Core Components - Import as default exports for better tree-shaking
+// Import Ant Design components using the standard method for better context sharing
-import Button from 'antd/es/button';
+import {
-import Input from 'antd/es/input';
+  Button,
-import Select from 'antd/es/select';
+  Input,
-import Typography from 'antd/es/typography';
+  Select,
-import Card from 'antd/es/card';
+  Typography,
-import Spin from 'antd/es/spin';
+  Card,
-import Empty from 'antd/es/empty';
+  Spin,
-import Space from 'antd/es/space';
+  Empty,
-import Tooltip from 'antd/es/tooltip';
+  Space,
-import Badge from 'antd/es/badge';
+  Tooltip,
-import Popconfirm from 'antd/es/popconfirm';
+  Badge,
-import Checkbox from 'antd/es/checkbox';
+  Popconfirm,
-import Dropdown from 'antd/es/dropdown';
+  Checkbox,
-import Menu from 'antd/es/menu';
+  Dropdown,
-import Modal from 'antd/es/modal';
+  Menu,
-import Tag from 'antd/es/tag';
+  Modal,
-import Avatar from 'antd/es/avatar';
+  Tag,
-import List from 'antd/es/list';
+  Avatar,
-import Table from 'antd/es/table';
+  List,
-import Flex from 'antd/es/flex';
+  Table,
-import Divider from 'antd/es/divider';
+  Flex,
-import Progress from 'antd/es/progress';
+  Divider,
-import Result from 'antd/es/result';
+  Progress,
-import Skeleton from 'antd/es/skeleton';
+  Result,
-import Alert from 'antd/es/alert';
+  Skeleton,
-import Tabs from 'antd/es/tabs';
+  Alert,
-import ConfigProvider from 'antd/es/config-provider';
+  Tabs,
+  ConfigProvider,
+  DatePicker,
+  TimePicker,
+  Form,
+  InputNumber,
+  Row,
+  Col,
+  Layout,
+  Drawer,
+  message,
+  notification,
+  theme
+} from 'antd';
 
-// Date & Time Components
+// Icons - Import commonly used ones
-import DatePicker from 'antd/es/date-picker';
-import TimePicker from 'antd/es/time-picker';
-
-// Form Components
-import Form from 'antd/es/form';
-import InputNumber from 'antd/es/input-number';
-
-// Layout Components
-import Row from 'antd/es/row';
-import Col from 'antd/es/col';
-import Layout from 'antd/es/layout';
-import Drawer from 'antd/es/drawer';
-
-// Message and Notification - Import separately
-import message from 'antd/es/message';
-import notification from 'antd/es/notification';
-
-// Theme
-import theme from 'antd/es/theme';
-
-// Re-export all components
 export {
-  React, // Export React to ensure it's available
+  EditOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+  MoreOutlined,
+  CheckOutlined,
+  CloseOutlined,
+  CalendarOutlined,
+  ClockCircleOutlined,
+  UserOutlined,
+  TeamOutlined,
+  TagOutlined,
+  BarsOutlined,
+  AppstoreOutlined,
+  FilterOutlined,
+  SearchOutlined,
+  SettingOutlined,
+  DownOutlined,
+  RightOutlined,
+  LeftOutlined,
+  UpOutlined,
+  ArrowLeftOutlined,
+  BellFilled,
+  BellOutlined,
+  SaveOutlined,
+  SyncOutlined,
+  PushpinFilled,
+  PushpinOutlined,
+  UsergroupAddOutlined,
+  ImportOutlined
+} from '@ant-design/icons';
+
+// Re-export all components with React
+export {
+  React,
   Button,
   Input,
   Select,
@@ -103,40 +128,7 @@ export {
   theme
 };
 
-// Icons - Import only commonly used ones
+// TypeScript Types - Import commonly used ones
-export {
-  EditOutlined,
-  DeleteOutlined,
-  PlusOutlined,
-  MoreOutlined,
-  CheckOutlined,
-  CloseOutlined,
-  CalendarOutlined,
-  ClockCircleOutlined,
-  UserOutlined,
-  TeamOutlined,
-  TagOutlined,
-  BarsOutlined,
-  AppstoreOutlined,
-  FilterOutlined,
-  SearchOutlined,
-  SettingOutlined,
-  DownOutlined,
-  RightOutlined,
-  LeftOutlined,
-  UpOutlined,
-  ArrowLeftOutlined,
-  BellFilled,
-  BellOutlined,
-  SaveOutlined,
-  SyncOutlined,
-  PushpinFilled,
-  PushpinOutlined,
-  UsergroupAddOutlined,
-  ImportOutlined
-} from '@ant-design/icons';
-
-// TypeScript Types - Import only commonly used ones
 export type {
   ButtonProps,
   InputProps,

worklenz-frontend/vite.config.ts

@@ -72,46 +72,19 @@ export default defineConfig(({ command, mode }) => {
 
       // **Rollup Options**
       rollupOptions: {
-        // **External dependencies to prevent bundling issues**
-        external: (id) => {
-          // Don't externalize anything for now to prevent context issues
-          return false;
-        },
         output: {
-          // **Manual Chunking Strategy - Fixed for React context issues**
+          // **Simplified Manual Chunking Strategy - Fixed for React context issues**
           manualChunks: (id) => {
             // Vendor libraries
             if (id.includes('node_modules')) {
-              // React core - keep together to prevent context issues
+              // React and React DOM - keep in main vendor to ensure single instance
-              if (id.includes('react') && !id.includes('react-router') && !id.includes('react-redux') && !id.includes('react-i18next')) {
+              if (id.includes('react') || id.includes('react-dom')) {
-                return 'react-core';
+                return 'vendor';
               }
               
-              // Ant Design - Split into smaller chunks but ensure React dependency
+              // Ant Design - Keep together to share React context
-              if (id.includes('antd/es') || id.includes('antd/lib')) {
+              if (id.includes('antd') || id.includes('@ant-design')) {
-                // Split antd by component types for better caching
+                return 'antd';
-                if (id.includes('date-picker') || id.includes('time-picker') || id.includes('calendar')) {
-                  return 'antd-date';
-                }
-                if (id.includes('table') || id.includes('list') || id.includes('tree')) {
-                  return 'antd-data';
-                }
-                if (id.includes('form') || id.includes('input') || id.includes('select') || id.includes('checkbox')) {
-                  return 'antd-form';
-                }
-                if (id.includes('button') || id.includes('tooltip') || id.includes('dropdown') || id.includes('menu')) {
-                  return 'antd-basic';
-                }
-                if (id.includes('modal') || id.includes('drawer') || id.includes('popconfirm')) {
-                  return 'antd-overlay';
-                }
-                // Catch remaining antd components
-                return 'antd-misc';
-              }
-              
-              // Icons
-              if (id.includes('@ant-design/icons')) {
-                return 'antd-icons';
               }
               
               // Chart.js and related
@@ -177,7 +150,7 @@ export default defineConfig(({ command, mode }) => {
       },
       
       // **Chunk Size Warning Limit**
-      chunkSizeWarningLimit: 1000,
+      chunkSizeWarningLimit: 2000, // Increased to accommodate larger antd chunk
     },
 
     // **Optimization**
@@ -191,19 +164,16 @@ export default defineConfig(({ command, mode }) => {
         'react-redux',
         'react-i18next',
         'dayjs',
-        // Include antd core to prevent context issues
-        'antd/es/config-provider',
-        'antd/es/button',
-        'antd/es/input',
-        'antd/es/select',
       ],
-      // Don't exclude antd to prevent React context issues
+      // Remove antd from exclude to prevent context issues
       exclude: [],
     },
 
     // **Define Global Constants**
     define: {
       __DEV__: !isProduction,
+      // Ensure global React is available
+      global: 'globalThis',
     },
   };
 });