React 异步加载组件

DebugMi 发布于 2017-08-02编辑于 2018-01-20阅读:3932

最近做一个单页项目时,用到了 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'}} />

0