这是在 react 项目中实现延迟加载和代码分割的分步指南。我们将创建一个具有两个路由的简单应用程序，延迟加载组件。
第 1 步：创建一个新的 react 应用程序
如果您还没有创建一个新的 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 步：设置延迟加载和代码分割
创建组件
- 在 src 目录中创建一个名为 components 的文件夹。
- 在组件内部，创建两个文件：home.js 和 about.js。
home.js
import react from 'react';
const home = () => {
return home page
;
};
export default home;
关于.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... 
