diff --git a/src/components/Dashboard/common/HistoryDisplay.jsx b/src/components/Dashboard/common/HistoryDisplay.jsx
index f458911..f0dda26 100644
--- a/src/components/Dashboard/common/HistoryDisplay.jsx
+++ b/src/components/Dashboard/common/HistoryDisplay.jsx
@@ -1,6 +1,19 @@
-import { useEffect, useState, useContext, useMemo } from 'react'
-import { Card, Segmented, Flex, Popover, DatePicker, Button, Space } from 'antd'
-import { Column } from '@ant-design/charts'
+import { useEffect, useState, useContext, useMemo, lazy, Suspense } from 'react'
+import {
+ Card,
+ Segmented,
+ Flex,
+ Popover,
+ DatePicker,
+ Button,
+ Space,
+ Skeleton
+} from 'antd'
+
+const Column = lazy(() =>
+ import('@ant-design/charts').then((module) => ({ default: module.Column }))
+)
+
import PropTypes from 'prop-types'
import { getModelByName } from '../../../database/ObjectModels'
import { ApiServerContext } from '../context/ApiServerContext'
@@ -378,7 +391,21 @@ const HistoryDisplay = ({
)}
- {chartData.length > 0 && }
+ {chartData.length > 0 && (
+
+
+
+ }
+ >
+
+
+ )}
{loading == false && chartData.length == 0 && (
diff --git a/vite.config.js b/vite.config.js
index e6acdbc..4471ae8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,6 +5,7 @@ import svgr from 'vite-plugin-svgr'
import svgo from 'vite-plugin-svgo'
import path from 'path'
import { fileURLToPath } from 'url'
+import { visualizer } from 'rollup-plugin-visualizer'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
@@ -19,10 +20,10 @@ export default defineConfig({
optimizeDeps: {
include: ['@ant-design/icons']
},
- plugins: [react(), svgo(), svgr(), eslintPlugin()],
+ plugins: [react(), svgo(), svgr(), eslintPlugin(), visualizer()],
build: {
outDir: 'build',
- chunkSizeWarningLimit: 1500,
+ chunkSizeWarningLimit: 2000,
rollupOptions: {
output: {
manualChunks(id) {
@@ -36,30 +37,34 @@ export default defineConfig({
return 'lezer'
}
- // --- Ant Design & related
+ // --- Core Vendor (Ant Design, React, etc.)
if (
id.includes('node_modules/antd') ||
id.includes('node_modules/@ant-design') ||
id.includes('node_modules/rc-') ||
id.includes('node_modules/antd-style') ||
id.includes('node_modules/@rc-component') ||
- id.includes('node_modules/dayjs')
+ id.includes('node_modules/dayjs') ||
+ id.includes('node_modules/react') ||
+ id.includes('node_modules/react-dom') ||
+ id.includes('node_modules/react-router-dom')
) {
- // Keep charts and their AntV dependencies together in a separate chunk
+ // EXCLUDE charts so they are handled by lazy loading in HistoryDisplay.jsx
if (
id.includes('node_modules/@ant-design/charts') ||
id.includes('node_modules/@ant-design/plots') ||
id.includes('node_modules/@ant-design/graphs') ||
- id.includes('node_modules/@ant-design/charts-util')
+ id.includes('node_modules/@ant-design/charts-util') ||
+ id.includes('node_modules/@antv')
) {
- return 'ant-charts'
+ return
}
return 'antd'
}
- // --- AntV (used by charts)
- if (id.includes('node_modules/@antv')) {
- return 'ant-charts'
+ // --- Lodash
+ if (id.includes('node_modules/lodash')) {
+ return 'lodash'
}
// --- Three.js
@@ -77,11 +82,6 @@ export default defineConfig({
return 'online-3d-viewer'
}
- // --- Lodash
- if (id.includes('node_modules/lodash')) {
- return 'lodash'
- }
-
// --- tsparticles
if (
id.includes('node_modules/@tsparticles') ||
@@ -89,15 +89,6 @@ export default defineConfig({
) {
return 'tsparticles'
}
-
- // --- React vendor
- if (
- id.includes('node_modules/react') ||
- id.includes('node_modules/react-dom') ||
- id.includes('node_modules/react-router-dom')
- ) {
- return 'react-vendor'
- }
}
}
}