这是在 React 项目中实现延迟加载和代码分割的分步指南。我们将创建一个具有两个路由的简单应用程序，延迟加载组件。
如果您还没有创建一个新的 React 应用程序，请使用 Create React App 创建一个新的 React 应用程序：
npx create-react-app lazy-loading-example cd lazy-loading-example
安装react-router-dom用于路由：
npm install react-router-dom
Home.js
import React from 'react';
const Home = () => {
return <h2>Home Page</h2>;
};
export default Home;
关于.js
import React from 'react';
const About = () => {
return <h2>About Page</h2>;
};
export default About;
现在，修改您的 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 (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route path="/about" component={About} />
<Route path="/" component={Home} />
</Switch>
</Suspense>
</Router>
);
}
export default App;
现在，运行您的应用程序以查看其实际效果：
npm start
您可以通过以下方式进一步增强您的设置：
如果您需要更多具体功能或其他帮助，请告诉我！
以上是在 React 项目中实现延迟加载和代码分割的分步指南的详细内容。更多信息请关注PHP中文网其他相关文章！
