react路由懒加载

方法一:

• React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件
• 然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）
• fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件

    import { Suspense, lazy } from "react"
    const Main = React.lazy(() => import("./main"))
    <Router>
        <Suspense fallback={<div>Loading...</div>}>
            <Route path="/main" component={Main}></Route>{/*路由懒加载*/}
        </Suspense>
    </Router>

方法二:

//utils文件夹新建文件 LazyLoad .js

//安装插件 cnpm i react-loadable -S 
import Loadable from 'react-loadable';

const LoadingComponent = () => {
    return (
        <div>
            loading...路由懒加载 需要这个组件的时候才去加载
        </div>
    )
}

//loading加载组件       loader 需要懒加载的组件
export default (loader, loading = LoadingComponent) => {
    return Loadable({
        loader,
        loading
    })
}

//路由出口文件
import LazyLoad from "./utils/LazyLoad.js"
<Switch>
	<Route path="/main" component={ LazyLoad( ()=>import( "./main"))}</Route>
</Switch >