如何实现react路由的懒加载

使用 React.lazy 和 Suspense

React.lazy 函数允许动态导入组件，结合 Suspense 组件实现懒加载。Suspense 提供加载中的回退 UI。

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

结合 React Router 使用

在 React Router 中，可以将懒加载组件作为路由配置的一部分。适用于路由级代码分割。

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

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

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

预加载优化

通过预加载策略提升用户体验，例如在用户悬停时提前加载目标路由组件。

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

function App() {
  const preloadAbout = () => {
    import('./About');
  };

  return (
    <div onMouseEnter={preloadAbout}>
      <Suspense fallback={<div>Loading...</div>}>
        <About />
      </Suspense>
    </div>
  );
}

动态导入命名导出

对于具名导出的组件，需通过动态导入的 then 方法处理模块对象。

const LazyComponent = React.lazy(() =>
  import('./LazyComponent').then(module => ({
    default: module.NamedExport
  }))
);

错误边界处理

使用错误边界捕获懒加载过程中的异常，避免整个应用崩溃。

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;
  }
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Webpack 魔法注释

通过 Webpack 的魔法注释自定义分块名称，便于识别和管理代码块。

const LazyComponent = React.lazy(() =>
  import(/* webpackChunkName: "custom-name" */ './LazyComponent')
);