feat: 首页添加性能监控

src/contexts/AuthContext.js

@@ -131,7 +131,7 @@ export const AuthProvider = ({ children }) => {
     } finally {
       // ⏱️ 性能监控: 标记认证检查结束
       performanceMonitor.mark('auth-check-end');
-      performanceMonitor.measure('auth-check', 'auth-check-start', 'auth-check-end');
+      performanceMonitor.measure('auth-check-start', 'auth-check-end', '认证检查');
 
       // ⚡ 只在 isLoading 为 true 时才设置为 false，避免不必要的状态更新
       setIsLoading((prev) => prev === false ? prev : false);

src/types/global.d.ts

@@ -0,0 +1,28 @@
+// src/types/global.d.ts
+// 全局类型定义
+
+import type { PerformanceMonitor } from '@/utils/performanceMonitor';
+
+declare global {
+  interface Window {
+    /**
+     * 性能监控工具 - 在控制台可通过 window.__PERFORMANCE__ 访问
+     *
+     * @example
+     * // 查看性能报告
+     * window.__PERFORMANCE__.getReport()
+     *
+     * // 生成性能报告
+     * window.__PERFORMANCE__.generateReport()
+     *
+     * // 导出 JSON
+     * window.__PERFORMANCE__.exportJSON()
+     *
+     * // 获取指标
+     * window.__PERFORMANCE__.getMetrics()
+     */
+    __PERFORMANCE__?: PerformanceMonitor;
+  }
+}
+
+export {};

src/utils/performanceMonitor.ts

@@ -56,7 +56,7 @@ const performanceMeasures: Array<{ name: string; duration: number; startMark: st
 /**
  * 性能监控器类
  */
-class PerformanceMonitor {
+export class PerformanceMonitor {
   private metrics: PerformanceMetrics = {};
   private isProduction: boolean;
 
@@ -175,19 +175,19 @@ class PerformanceMonitor {
   collectReactMetrics(): void {
     // React初始化时间
     const reactInit = this.measure('app-start', 'react-ready', 'React初始化');
-    if (reactInit) this.metrics.reactInit = reactInit;
+    if (reactInit !== null) this.metrics.reactInit = reactInit;
 
     // 认证检查时间
     const authCheck = this.measure('auth-check-start', 'auth-check-end', '认证检查');
-    if (authCheck) this.metrics.authCheck = authCheck;
+    if (authCheck !== null) this.metrics.authCheck = authCheck;
 
     // 首页渲染时间
     const homepageRender = this.measure('homepage-render-start', 'homepage-render-end', '首页渲染');
-    if (homepageRender) this.metrics.homepageRender = homepageRender;
+    if (homepageRender !== null) this.metrics.homepageRender = homepageRender;
 
     // 计算总白屏时间 (从页面开始到首屏完成)
     const totalWhiteScreen = this.measure('app-start', 'homepage-render-end', '总白屏时间');
-    if (totalWhiteScreen) this.metrics.totalWhiteScreen = totalWhiteScreen;
+    if (totalWhiteScreen !== null) this.metrics.totalWhiteScreen = totalWhiteScreen;
   }
 
   /**
@@ -382,8 +382,11 @@ class PerformanceMonitor {
 // 导出单例
 export const performanceMonitor = new PerformanceMonitor();
 
-// 页面加载完成后自动生成报告
+// 挂载到全局对象，方便在控制台调试
 if (typeof window !== 'undefined') {
+  (window as any).__PERFORMANCE__ = performanceMonitor;
+
+  // 页面加载完成后自动生成报告
   window.addEventListener('load', () => {
     // 延迟1秒确保所有指标收集完成
     setTimeout(() => {

src/views/Home/HomePage.tsx

@@ -10,6 +10,7 @@ import { useHomeResponsive } from '@/hooks/useHomeResponsive';
 import { ACQUISITION_EVENTS } from '@/lib/constants';
 import { CORE_FEATURES } from '@/constants/homeFeatures';
 import type { Feature } from '@/types/home';
+import { performanceMonitor } from '@/utils/performanceMonitor';
 import { HeroBackground } from './components/HeroBackground';
 import { HeroHeader } from './components/HeroHeader';
 import { FeaturedFeatureCard } from './components/FeaturedFeatureCard';
@@ -36,6 +37,11 @@ const HomePage: React.FC = () => {
     showDecorations
   } = useHomeResponsive();
 
+  // 性能监控: 标记首页开始渲染
+  useEffect(() => {
+    performanceMonitor.mark('homepage-render-start');
+  }, []);
+
   // PostHog 追踪:页面浏览
   useEffect(() => {
     track(ACQUISITION_EVENTS.LANDING_PAGE_VIEWED, {
@@ -67,6 +73,8 @@ const HomePage: React.FC = () => {
   // 背景图片加载完成回调
   const handleImageLoad = useCallback(() => {
     setImageLoaded(true);
+    // 性能监控: 标记首页渲染结束(关键资源加载完成)
+    performanceMonitor.mark('homepage-render-end');
   }, []);
 
   // 特色功能(第一个)