️ perf: Defer Visactor chart libs to dashboard; minimize home bundle

Home started loading `/assets/visactor-*.js` due to static imports of `@visactor/react-vchart` and the Semi theme in dashboard components/hooks. This change moves chart dependencies to lazy/dynamic imports so they load only on dashboard routes.

Changes
- StatsCards.jsx: replace static `VChart` import with `React.lazy` + `Suspense` (fallback: null)
- ChartsPanel.jsx: replace static `VChart` import with `React.lazy` + `Suspense` (fallback: null)
- useDashboardCharts.js: remove static `initVChartSemiTheme` import; dynamically import and initialize the theme inside `useEffect` with a cancel guard

Behavior
- Home page no longer downloads `visactor` chunks on first load
- Chart libraries are fetched only when visiting `/console` (dashboard)
- No functional changes to chart rendering

Files
- web/src/components/dashboard/StatsCards.jsx
- web/src/components/dashboard/ChartsPanel.jsx
- web/src/hooks/dashboard/useDashboardCharts.js

Verification
- Build the app (`npm run build`) and open `/`: no `/assets/visactor-*.js` requests
- Navigate to `/console`: `visactor` chunks load and charts render as expected

Breaking Changes
- None

Follow-ups
- If needed, further trim homepage bundle by reducing heavy icon sets on the hero section
This commit is contained in:
t0ng7u
2025-08-17 01:22:44 +08:00
parent 9805d35a5d
commit b67a42e0a8
6 changed files with 60 additions and 46 deletions

View File

@@ -18,7 +18,6 @@ For commercial licensing, please contact support@quantumnous.com
*/
import { useState, useCallback, useEffect } from 'react';
import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
import {
modelColorMap,
renderNumber,
@@ -418,9 +417,19 @@ export const useDashboardCharts = (
// ========== 初始化图表主题 ==========
useEffect(() => {
initVChartSemiTheme({
isWatchingThemeSwitch: true,
});
// 动态加载 visactor 主题,避免首页首屏加载
let canceled = false;
(async () => {
try {
const mod = await import('@visactor/vchart-semi-theme');
if (!canceled && mod?.initVChartSemiTheme) {
mod.initVChartSemiTheme({ isWatchingThemeSwitch: true });
}
} catch (e) {
// 忽略加载失败,图表页再尝试
}
})();
return () => { canceled = true; };
}, []);
return {