react-loadable 的核心思想

react-loadable解决什么问题?

当你的项目足够大时，把所有代码打包到一个bundle中的启动时间就会成为问题。这时就需要把app拆分为若干个bundle，然后根据需求动态加载它们.

react-loadable的关键实现

1.import 和 import()是不同的.
import * from '';在编译阶段执行，同步执行。
import(相对路径) 异步执行，返回Promise对象。

2.state的loaded为真正渲染的组件。根据loading, error展示loading组件还是真实组件。
具体代码如下:

  function load(loader) {
  // loader为传入的参数loader: () => import('');
    let promise = loader();

    let state = {
      loading: true,
      loaded: null,
      error: null
    };

    state.promise = promise
      .then(loaded => {
        state.loading = false;
        state.loaded = loaded;
        return loaded;
      })
      .catch(err => {
        state.loading = false;
        state.error = err;
        throw err;
      });

    return state;
  }

  render() {
      if (this.state.loading || this.state.error) {
        return React.createElement(opts.loading, {
          isLoading: this.state.loading,
          pastDelay: this.state.pastDelay,
          timedOut: this.state.timedOut,
          error: this.state.error,
          retry: this.retry
        });
      } else if (this.state.loaded) {
        return opts.render(this.state.loaded, this.props);
      } else {
        return null;
      }
    }