react中lazy懒加载简单示例

import './App.css';
import {Link, Route, Routes,BrowserRouter} from 'react-router-dom'
import {lazy, Suspense} from "react";
import IsLoading from "./components/IsLoading";

const About = lazy(() => {
    return import("./components/About")
})
const Home = lazy(() => {
    return import("./components/Home")
})

function App() {
    return (
        <div>
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h2>React Router Demo</h2></div>
                </div>
            </div>
            <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                        <Link className="list-group-item" to="/">About</Link><br/>
                        <Link className="list-group-item" to="/home">Home</Link>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            <Suspense fallback={<IsLoading/>}>
                                <Routes>
                                    <Route path="/" element={<About/>}/>
                                    <Route path="/home" element={<Home/>}/>
                                </Routes>
                            </Suspense>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default App;

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
);

网速慢时正在加载中的效果

加载完毕的效果