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.
This commit is contained in:
chamikaJ
@@ -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,
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user