v6路由性能监控

React Router v6 路由性能监控实践

随着 React Router v6 的全面推广，路由性能监控成为应用优化的重要环节。本文将分享在 v6 版本中如何有效监控路由性能。

性能监控方案

首先，在路由配置中添加性能监控：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />, 
    loader: async () => {
      // 记录加载开始时间
      const start = performance.now();
      const data = await fetchData();
      // 记录加载耗时
      console.log(`加载耗时: ${performance.now() - start}ms`);
      return data;
    }
  }
]);

路由切换监控

使用 useNavigation 钩子监控路由切换状态：

import { useNavigation } from 'react-router-dom';

function App() {
  const navigation = useNavigation();
  
  useEffect(() => {
    if (navigation.state === 'loading') {
      console.log('路由切换开始');
    }
    if (navigation.state === 'idle') {
      console.log('路由切换完成');
    }
  }, [navigation.state]);
  
  return <RouterProvider router={router} />;
}

实际应用建议

1. 在生产环境添加详细的性能日志
2. 使用浏览器开发者工具的 Performance 面板进行深度分析
3. 结合 Sentry 或其他监控平台实现异常捕获
4. 定期审查路由加载时间，优化慢查询

通过以上方案，可以有效监控 v6 路由性能，为应用优化提供数据支撑。