2. 组件懒加载

在React中可以通过 lazy 和 Suspense 实现组件懒加载， 参考文档

• 使用 lazy 方法 import 组件，注意组件必须是 default 导出的
• 用 Suspense 包裹要动态加载的组件
• fallback 是必填属性，用于在组件加载完成前显示，可以是过渡动画 ```tsx import { Route, Routes } from ‘react-router-dom’; import { lazy, Suspense } from ‘react’; import ‘./App.css’; import { Footer } from ‘./components/Footer’; import { Header } from ‘./components/Header’; import Loading from ‘./components/Loading’;

const Home = lazy(() => import(‘./pages/Home’)) const About = lazy(() => import(‘./pages/About’)) const History = lazy(() => import(‘./pages/History’))

function App() { return ( <>

 <Footer />
 </>

); }

export default App;

```