perf(Calendar): FullCalendar 懒加载与代码分割优化
- HeroPanel: 使用 React.lazy + Suspense 懒加载 FullCalendarPro - craco.config: 添加 @fullcalendar 独立分包配置(~15KB gzip) - event mock: 生成连续概念数据(2-4天同概念)便于测试跨天效果 - LimitAnalyse: 文案优化(高潮→高涨) - ForceGraphView: 层级图优化 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
// 综合日历面板:融合涨停分析 + 投资日历
|
||||
// 点击日期弹出详情弹窗(TAB切换历史涨停/未来事件)
|
||||
|
||||
import React, { useEffect, useState, useCallback, useMemo, memo } from 'react';
|
||||
import React, { useEffect, useState, useCallback, useMemo, memo, lazy, Suspense } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { loadWatchlist, toggleWatchlist } from '@store/slices/stockSlice';
|
||||
import {
|
||||
@@ -56,7 +56,10 @@ import { getApiBase } from '@utils/apiConfig';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import dayjs from 'dayjs';
|
||||
import KLineChartModal from '@components/StockChart/KLineChartModal';
|
||||
import { FullCalendarPro } from '@components/Calendar';
|
||||
// 懒加载 FullCalendar(约 60KB gzip,延迟加载提升首屏性能)
|
||||
const FullCalendarPro = lazy(() =>
|
||||
import('@components/Calendar').then(module => ({ default: module.FullCalendarPro }))
|
||||
);
|
||||
import ThemeCometChart from './ThemeCometChart';
|
||||
import EventDailyStats from './EventDailyStats';
|
||||
|
||||
@@ -2477,14 +2480,23 @@ const CombinedCalendar = () => {
|
||||
backgroundSize="200% 100%"
|
||||
/>
|
||||
|
||||
{/* FullCalendar Pro - 炫酷跨天事件条日历 */}
|
||||
<FullCalendarPro
|
||||
data={calendarData}
|
||||
currentMonth={currentMonth}
|
||||
onDateClick={handleDateClick}
|
||||
onMonthChange={handleMonthChange}
|
||||
height="650px"
|
||||
/>
|
||||
{/* FullCalendar Pro - 炫酷跨天事件条日历(懒加载) */}
|
||||
<Suspense fallback={
|
||||
<Center h="650px">
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="gold" thickness="3px" />
|
||||
<Text color="whiteAlpha.600" fontSize="sm">加载日历组件...</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
}>
|
||||
<FullCalendarPro
|
||||
data={calendarData}
|
||||
currentMonth={currentMonth}
|
||||
onDateClick={handleDateClick}
|
||||
onMonthChange={handleMonthChange}
|
||||
height="650px"
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
{/* 图例说明 */}
|
||||
<HStack spacing={4} mt={4} justify="center" flexWrap="wrap">
|
||||
|
||||
Reference in New Issue
Block a user