React学习笔记——lazyLoad

• 当未使用懒加载时，页面一打开，就将所有的路由组件给加载到页面了
• 如果路由组件很多，且用户不会真正访问到那么多的路由组件，那么就相当于加载了不需要的多余组件
• 因此，可以使用路由懒加载，当用户真正需要访问的时候再去请求
• 如下

import {lazy, Suspense} from 'react'
import {Route} from 'react-router-dom'

const Home = lazy(()=>import('./home'))
const About = lazy(()=>import('./about'))

...
render () {
	return (
		...
		<!-- 当组件正在加载时，显示 Loading -->
		<Suspense fallback={<h1>Loading...</h1>}>
			<Route path="/home" component={Home} />
			<Route path="/about" component={About} />
		</Suspense>
		...
	)
}
...

fallback也可以指定为一个Loading组件进行添加，但是Loading组件不能进行懒加载。

import Loading from './Loading'
		<Suspense fallback={<h1><Loading/></h1>}>
			<Route path="/home" component={Home} />
			<Route path="/about" component={About} />
		</Suspense>

步骤总结：

1. 通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包

	const Login = lazy(()=>import('@/pages/Login'))

2. 通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面

	<Suspense fallback={<h1>loading.....</h1>}>
        <Switch>
            <Route path="/xxx" component={Xxxx}/>
            <Redirect to="/login"/>
        </Switch>
    </Suspense>