面试题：React Router中如何实现懒加载组件

Question

请描述在React Router中实现懒加载组件的具体步骤，并给出一个简单的代码示例。同时说明懒加载在实际项目中的优势。

Answer 1

实现步骤

1. 安装依赖：确保项目中安装了 react-router-dom。如果没有，可通过 npm install react-router-dom 或 yarn add react-router-dom 安装。
2. 使用 React.lazy 和 Suspense：在路由配置处，使用 React.lazy 来懒加载组件，并用 Suspense 组件包裹以处理加载状态。

代码示例

import React, { lazy, Suspense } 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>
      <Routes>
        <Route path="/" element={
          <Suspense fallback={<div>Loading...</div>}>
            <Home />
          </Suspense>
        } />
        <Route path="/about" element={
          <Suspense fallback={<div>Loading...</div>}>
            <About />
          </Suspense>
        } />
      </Routes>
    </Router>
  );
}

export default App;

实际项目中的优势

1. 提高应用加载速度：初始加载时，只加载必要组件，减少初始 bundle 大小，用户能更快看到应用内容。
2. 优化用户体验：对于大型应用，按需加载组件，避免一次性加载大量代码，防止页面长时间白屏，提升用户使用体验。
3. 资源合理利用：只有在需要时才加载组件资源，节省带宽，尤其对移动设备或网络条件不佳的用户更友好。