react按需加载asyncComponent&&react-loadable

1.asyncComponent

最简单的情况是，我们只需要异步引入视图(容器)组件，不必考虑reducers和state的更新。
这时候我们可以构造一个asyncComponent 函数：

    import { asyncComponent } from 'react-async-component';
    
    const AsyncHome = asyncComponent(() => import("./containers/Home"));
    <Route path="/" exact component={AsyncHome} />

2.react-loadable

当我们用asyncComponent的时候，会希望在加载时显示一些loading组件，有一个简单的插件react-loadable

    import Loadable from 'react-loadable';
    
	const AsyncHome = Loadable({
	  loader:() =>import('./pages').then(module => module.UserList),
	  loading: Loading,    //加载进度条
	  delay: 300       //默认的延迟是 200ms
	});
	<Route path="/" exact component={AsyncHome} />
	<Route path="/commodity/afterSale" component={AfterSale} exact/>  //exact表示初始化入口路径（默认路径）
	
	//Loading.js加载进度条内容如下：
	import React,{Component} from 'react';
	import {Icon,Spin} from 'antd';
	class Loading extends Component{
	  render(){
	    const antIcon = <Icon type="loading" style={this.props.style} spin />
	    return(
	      <div>
	        <Spin indicator={antIcon}/>
	      </div>
	    )
	  }
	}
	export default Loading