⚡️ 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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user