我们通常使用react路由都类似下面代码，这样做适合轻量级网页，因为它默认情况下react组件都会打包到bundle下，

但是一般用于后置的组件[异步]不需要首次加载，这时候就用到了组件懒加载。

普通路由组件

import React, { lazy, Suspense} from 'react'
import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom'
import Home from './page/Home'
import List from './page/List'
export default function App() {
return (
<>
<header>header</header>
<Router>
<Link to="/">首页</Link>
<Link to="/list">列表</Link>
<Routes>
<Route path='/' element={<Home />} ></Route>
<Route path='/list' element={<List />} ></Route>
</Routes>
</Router>
<footer>footer</footer>
</>
)
}

经过lazy优化后

会把每个组件异步加载

import React, { lazy, Suspense} from 'react'
import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom'
// import Home from './page/Home'
// import List from './page/List'

const Home = lazy(() =>  import(/*webpackChunkName: "Home"*/'./page/Home') )
const List = lazy(() =>  import(/*webpackChunkName: "List"*/'./page/List') )
export default function App() {
  return (
    <>
    <header>header</header>
    <Router>
        <Link to="/">首页</Link>
        <Link to="/list">列表</Link>
        <Suspense fallback={<div>loading...</div>}>
            <Routes>
            <Route path='/' element={<Home />} ></Route>
            <Route path='/list' element={<List />} ></Route>
            </Routes>
        </Suspense>
    </Router>
    <footer>footer</footer>
    </>
  )
}