From a4da6cdf3a1e703eff689df702c6c23a0a7be6a0 Mon Sep 17 00:00:00 2001 From: chamikaJ Date: Wed, 25 Jun 2025 13:16:58 +0530 Subject: [PATCH] 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 | 172 +++++++++---------- worklenz-frontend/vite.config.ts | 52 ++---- 2 files changed, 93 insertions(+), 131 deletions(-) diff --git a/worklenz-frontend/src/shared/antd-imports.ts b/worklenz-frontend/src/shared/antd-imports.ts index e0e2e762..78764e3d 100644 --- a/worklenz-frontend/src/shared/antd-imports.ts +++ b/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 - * - Only commonly used components to reduce bundle size - * - Separate icon imports to avoid loading entire icon set + * - Consistent imports across the application + * - Better tree-shaking through centralized management + * - 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 Button from 'antd/es/button'; -import Input from 'antd/es/input'; -import Select from 'antd/es/select'; -import Typography from 'antd/es/typography'; -import Card from 'antd/es/card'; -import Spin from 'antd/es/spin'; -import Empty from 'antd/es/empty'; -import Space from 'antd/es/space'; -import Tooltip from 'antd/es/tooltip'; -import Badge from 'antd/es/badge'; -import Popconfirm from 'antd/es/popconfirm'; -import Checkbox from 'antd/es/checkbox'; -import Dropdown from 'antd/es/dropdown'; -import Menu from 'antd/es/menu'; -import Modal from 'antd/es/modal'; -import Tag from 'antd/es/tag'; -import Avatar from 'antd/es/avatar'; -import List from 'antd/es/list'; -import Table from 'antd/es/table'; -import Flex from 'antd/es/flex'; -import Divider from 'antd/es/divider'; -import Progress from 'antd/es/progress'; -import Result from 'antd/es/result'; -import Skeleton from 'antd/es/skeleton'; -import Alert from 'antd/es/alert'; -import Tabs from 'antd/es/tabs'; -import ConfigProvider from 'antd/es/config-provider'; +// Import Ant Design components using the standard method for better context sharing +import { + Button, + Input, + Select, + Typography, + Card, + Spin, + Empty, + Space, + Tooltip, + Badge, + Popconfirm, + Checkbox, + Dropdown, + Menu, + Modal, + Tag, + Avatar, + List, + Table, + Flex, + Divider, + Progress, + Result, + Skeleton, + Alert, + Tabs, + ConfigProvider, + DatePicker, + TimePicker, + Form, + InputNumber, + Row, + Col, + Layout, + Drawer, + message, + notification, + theme +} from 'antd'; -// Date & Time Components -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 +// Icons - Import commonly used ones 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 -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 +// TypeScript Types - Import commonly used ones export type { ButtonProps, InputProps, diff --git a/worklenz-frontend/vite.config.ts b/worklenz-frontend/vite.config.ts index b033ac90..b4449c54 100644 --- a/worklenz-frontend/vite.config.ts +++ b/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 - if (id.includes('react') && !id.includes('react-router') && !id.includes('react-redux') && !id.includes('react-i18next')) { - return 'react-core'; + // React and React DOM - keep in main vendor to ensure single instance + if (id.includes('react') || id.includes('react-dom')) { + return 'vendor'; } - // Ant Design - Split into smaller chunks but ensure React dependency - if (id.includes('antd/es') || id.includes('antd/lib')) { - // Split antd by component types for better caching - 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'; + // Ant Design - Keep together to share React context + if (id.includes('antd') || id.includes('@ant-design')) { + return 'antd'; } // 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', }, }; }); \ No newline at end of file