react如何实现路由懒加载

使用React.lazy和Suspense实现懒加载

React.lazy函数允许动态导入组件，实现按需加载。Suspense组件用于在懒加载组件加载过程中显示备用内容。

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } 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>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

路由配置中使用懒加载

在React Router v6中，可以通过路由配置对象实现懒加载：

import { lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

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

const App = () => (
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="about" element={<About />} />
    </Route>
  </Routes>
);

自定义懒加载高阶组件

创建高阶组件封装加载状态和错误处理：

import React, { Suspense } from 'react';

function lazyLoad(importFunc, fallback = null) {
  const LazyComponent = React.lazy(importFunc);

  return (props) => (
    <Suspense fallback={fallback || <div>Loading...</div>}>
      <LazyComponent {...props} />
    </Suspense>
  );
}

// 使用方式
const Home = lazyLoad(() => import('./Home'));

预加载策略优化

在用户可能访问的路径上预先加载组件，提升用户体验：

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

// 鼠标悬停时预加载
const preloadRoutes = () => {
  Home.preload();
  About.preload();
};

// 在导航组件中添加鼠标悬停事件
<NavLink onMouseEnter={() => import('./About')}>About</NavLink>

错误边界处理

结合错误边界组件捕获懒加载过程中的错误：

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>加载组件失败</h1>;
    }
    return this.props.children;
  }
}

// 使用方式
<ErrorBoundary>
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
</ErrorBoundary>

Webpack动态导入注释

使用Webpack的魔法注释为分割的chunk命名：

const Home = lazy(() => import(/* webpackChunkName: "home" */ './Home'));
const About = lazy(() => import(/* webpackChunkName: "about" */ './About'));

这会生成单独的文件如home.chunk.js和about.chunk.js，便于缓存管理和调试。