React 异步加载组件

最近做一个单页项目时，用到了 markdown 的解析库 react-markdown。然而用到的频次很低，它的大小却有 90k+，一载入就加载它非常浪费资源，因此考虑异步加载。

读完 webpack 文档后决定用 import() 解决，很简单。

开始用一个 div 在加载时用 loading 来占位，因为 jsx 规定 You cannot use a general expression as the React element type，因此 element type 应该用标识符。

  import Markdown from 'react-markdown'

  constructor (props) {
    super(props)
    this.state = {
      Markdown: () => <div>loading...</div>
    }
  }
  render () {
    const Markdown = this.state.Markdown
    return <Markdown source={'#foo'} />
  }

最后在组件即将挂载时去异步获取一下要加载的组件。OK，为大多数用户省下90K数据，等于说为节能减排和抑制全球变暖做出贡献了

  componentWillMount () {
    import(/* webpackChunkName: "md" */ 'react-markdown')
      .then(res => this.setState({ Markdown: res }))
      .catch(err => console.error(err))
  }

另外，实际项目不应该那么多代码，既然是用了 react，就应该封装成组件来使用，然后我简单的写了一个，就可以这样调用了：

<Async component={import('react-markdown')} props={{source: '#foo'}} />