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)
