React Loadable 实现懒加载优化 flash-of-content 的一些想法

React Loadable 的介绍和使用

http://thejameskyle.com/react-loadable.html

出现 flash-of-content 的原因

在没有使用懒加载的时候，webpack 会将所有的文件一次性打包，所以在用户打开第一个页面的时候，会加载很长时间，但是用户在不同页面进行跳转的时候便会非常流畅。

而懒加载要解决的问题就是在用户打开第一个页面时减少加载时间，按需加载（只会加载用户看到的页面内容），从而提高用户的体验效果，这在一个比较大的应用上是非常有用的，但这样做就会引发另一个问题，当用户去进入另一个页面时，由于是按需加载，在进入该页面前是没有提前加载该页面的，所以在进入该页面的时候会有一个加载的过程，从而造成 flash-of-content。
为了给用户带来比较好的用户体验，可以有以下两个思路：

• 在加载一个新的 component 的时候，加载的过程使用一个 loading component 来避免 flas-of-content

const AsyncFirst = Loadable({
  loader: () => import('./pages/First'),
  loading: () => <div>loading</div>,

})

• 在触发某个事件的时候加载另外一个或多个 component
  eg：在加载某个 component 的时候同时加载其它的 component

// 在加载 AsyncSecond 的时候会同时将 AsyncFirst 也加载
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { HashRouter, Route } from 'react-router-dom'
import Layout from './Layout'
import Loadable from 'react-loadable'

const AsyncFirst = Loadable({
  loader: () => import('./pages/First'),
  loading: () => <div>loading</div>,

})

const AsyncSecond = Loadable({
  loader: () => {
    import('./pages/Second')
  },
  loading: () => <div>loading</div>,

})

class App extends Component {

  componentDidMount () {
    window.setTimeout(() => {
      this.props.increase()
    }, 1000)
  }

  onClick(){
    AsyncSecond.preload()
  }

  render () {
    return (
      <HashRouter>
        <Layout>
          <Route path='/first' component={AsyncFirst}/>
          <Route path='/second' component={AsyncSecond}/>
        </Layout>
      </HashRouter>
    )
  }
}

const mapStateToProps = (state) => (state)
const mapDispatchToProps = (dispatch) => ({
  increase: () => {
    dispatch({
      type: 'INCREMENT'
    })
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(App)

eg：在触发点击时间时加载

import React from 'react'
import { connect } from 'react-redux'
import Loadable from 'react-loadable'

const AsyncSecond = Loadable({
  loader: () => import('./pages/Second'),
  loading: () => <div>loading</div>,

})

class First extends React.Component {

  onLoad(){
    AsyncSecond.preload()
  }
  
  render () {
    return <div>
      <button onClick={this.onLoad.bind(this)}>increase</button>
    </div>
  }
}

const mapStateToProps = (state) => (state)
export default connect(mapStateToProps)(First)