这是在 React 项目中实现延迟加载和代码分割的分步指南。我们将创建一个具有两条路线的简单应用程序，延迟加载组件。

第 1 步：创建一个新的 React 应用程序

如果您还没有，请使用 Create React App 创建一个新的 React 应用程序：

npx create-react-app lazy-loading-example
cd lazy-loading-example

第2步：安装React Router

安装react-router-dom用于路由：

npm install react-router-dom

第 3 步：设置延迟加载和代码分割

创建组件

1. 在src目录下创建一个名为components的文件夹。
2. 在组件内部，创建两个文件：Home.js 和 About.js。

Home.js

import React from 'react';

const Home = () => {
  return 
Home Page
;
};

export default Home;

About.js

import React from 'react';

const About = () => {
  return 
About Page
;
};

export default About;

更新App.js

现在，修改您的 App.js 文件以实现延迟加载和路由：

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

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

function App() {
  return (
    
      

      Loading...}>
        
          
          
        
      
    
  );
}

export default App;

第 4 步：运行您的应用程序

现在，运行您的应用程序以查看其实际情况：

npm start

第 5 步：测试延迟加载

1. 打开浏览器并导航至 http://localhost:3000。
2. 点击“Home”链接即可查看Home组件加载。
3. 点击“About”链接可以看到About组件延迟加载。

要点

• React.lazy用于动态导入组件，只有渲染时才会加载。
• Suspense 用于处理加载状态，在获取延迟加载组件时显示回退。
• 这种方法通过将代码分割成更小的块，显着减少了初始加载时间。

额外的增强功能

您可以通过以下方式进一步增强您的设置：

• 在延迟加载的组件周围实现错误边界以捕获加载错误。
• 针对大型应用程序使用 React Router 的高级路由策略。

如果您需要更多具体功能或其他帮助，请告诉我！