react路由组件的lazyLoad
-
预先准备两个路由组件（Home组件和About组件）
import React, { Component } from 'react export default class About extends Component {render() {return (<div>about组件</div>)} }import React, { Component } from 'react' export default class Home extends Component {render() {return (<div>home组件</div>)} } -
准备一个普通组件（Loading组件）
import React, { Component } from 'react' export default class Loading extends Component {render() {return (<div>Loading...</div>)} } -
同文件夹下新建index.jsx文件
import React, { Component, Suspense, lazy } from 'react' import { NavLink,Route} from 'react-router-dom' import Loading from './Loading' // 1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包 const Home = lazy(()=> import('./Home')) const About = lazy(()=> import('./About'))export default class lazyLoad extends Component {render() {return (<div><NavLink to='/home'>Home</NavLink><NavLink to='/about'>About</NavLink>{/* 2.通过 <Suspense> 指定在加载得到路由打包文件前显示一个自定义loading界面 */}<Suspense fallback={<Loading/>}><Route path='/home' component={Home}></Route><Route path='/about' component={About}></Route></Suspense></div>)} }网速较慢时，可以看到loading组件效果。