react如何实现路由懒加载

React 路由懒加载的实现方法

路由懒加载（Lazy Loading）通过动态导入（Dynamic Import）和 React 的 Suspense 组件实现，能有效减少初始加载时的资源体积。以下是具体实现方式：

使用 React.lazy 和 Suspense

React.lazy 允许动态导入组件，Suspense 提供加载中的占位内容：

import { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

动态导入的命名导出组件

若需懒加载命名导出的组件，需通过 then 链式调用：

const Settings = lazy(() => 
  import('./components/Settings').then(module => ({
    default: module.SettingsPanel
  }))
);

预加载优化

在用户可能访问的路由前触发预加载：

const About = lazy(() => import('./components/About'));

// 鼠标悬停导航链接时预加载
<Link 
  to="/about" 
  onMouseEnter={() => import('./components/About')}
>
  About
</Link>

错误边界处理

结合 ErrorBoundary 捕获懒加载失败：

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  render() {
    return this.state.hasError ? <h1>Load failed</h1> : this.props.children;
  }
}

// 使用方式
<ErrorBoundary>
  <Suspense fallback={<Spinner />}>
    <LazyComponent />
  </Suspense>
</ErrorBoundary>

注意事项

• 动态导入路径需为字符串字面量，不可使用变量。
• Suspense 的 fallback 需提供适当加载状态。
• 生产环境下需确保打包工具（如 Webpack）支持代码分割。