在 React 项目中实现延迟加载和代码分割的分步指南

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

npm install react-router-dom

import react from 'react';const home = () =&gt; {  return <h2>home page</h2>;};export default home;

import react from 'react';const about = () =&gt; {  return <h2>about page</h2>;};export default about;

import react, { suspense } from 'react';import { browserrouter as router, route, switch, link } from 'react-router-dom';// lazy load componentsconst home = react.lazy(() =&gt; import('./components/home'));const about = react.lazy(() =&gt; import('./components/about'));function app() {  return (    <router><nav><ul><li>            <link to="/">home          </li>          <li>            <link to="/about">about          </li>        </ul></nav><suspense fallback="{&lt;div">loading...}&gt;        <switch><route path="/about" component="{about}"></route><route path="/" component="{home}"></route></switch></suspense></router>  );}export default app;

npm start