react中异步加载利用import() 编写 asyncComponent.jses6提供import()函数，它是运

es6提供import()函数，它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。
import()返回一个 Promise 对象:

asyncComponent.js

import React, { Component } from 'react';
const asyncComponent = (importComponent) => {
  return class extends Component {
    constructor() {
      super();
      this.state = {
        component: null
      }
    }
    componentDidMount() {
      importComponent()
        .then(cmp => {
          this.setState({ component: cmp.default }); //.default 是模块有default输出接口
        });
    }
    //或者使用async/await 写成
    /* async componentDidMount() {
      const { default: component } = await importComponent(); //解构
      this.setState({
        component: component
      });
    } */
    render() {
      const C = this.state.component;
      return C ? <C {...this.props} /> : null;
    }
  }
};
export default asyncComponent;

router.js

// 异步组件
import AsyncComponent from './asyncComponent.js';
// 组件页面
const Home = AsyncComponent(() => import(/* webpackChunkName: "Home" */ './Home/index.jsx'));
...
<Route path="/" exact component={Home} />