react懒加载lazy

React 懒加载通常指的是代码分割，将组件代码分割为不同的块，在需要时才加载相应的代码。在React中，可以使用React.lazy函数和React Router的<Suspense>组件来实现。

以下是一个使用React.lazy和Suspense实现组件懒加载的例子：

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
// 使用lazy函数来创建一个动态加载的组件
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
 
function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch>
      </Suspense>
    </Router>
  );
}
 
export default App;

在这个例子中，我们创建了两个懒加载组件Home和About。当用户访问/about路径时，About组件会被懒加载。Suspense组件的fallback属性接受一个React元素，它会在组件正在加载时显示。当懒加载的组件加载完成后，就会显示对应的组件内容。