前段时间，因为项目有按需加载的要求，于是就添加了react-router到项目中。在网上找了一下有关react-router如何实现按需加载的例子。但是，按照示例(注:没有升级到4.0以后的版本可以正常使用)的说明写完之后，在导航栏点击的时候，却没有任何反应。最开始以为是我的代码写错了，从头到尾检查了一遍，也没看出来到底是什么地方出了问题。无奈之下，只好登上react-router的官网看了看，发现已经升级到了4.0版本了。看了看api，发现getComponent这个prop已经从Route组件中移除了。把文档从头到脚翻了一遍，才发现已经落后于时代好多年。
以前的解决方案
在2.0的时代，在react-router中，按需加载需要用到的最关键的一个函数，就是require.ensure(),它是按需加载能够实现的核心。webpack官网对其描述如下
require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
关键就在于callback函数，需要异步加载的文件都在这个回调中被require进来。对于前端而言，官网的介绍也很明白，这些文件在被需要时候通过jsonp获取。而通过一个简单的包装，将require.ensure()放入getComponent中，其余的部分webpack则会帮我们完成
4.0版本方案
在最新的4.0版本中，官方放弃了这种处理按需加载的方式，选择了一个更加简洁的处理方式。
在官方给出的示例中，提供了一个Bundle组件。具体代码如下：
import React, {Component} from 'react'
export default class Bundle extends Component {
constructor(props) {
super(props)
}
componentWillMount() {
this.load(this.props)
}
componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps)
}
}
load = (props) => {
this.setState({
mod:null
})
props.load((mod) => {
this.setState({
mod:mod.default?mod.default:mod
})
})
}
render() {
return this.props.children(this.state.mod)
}
}
然后，使用了一个webpack的加载器bundle-loader来处理我们需要进行分割的模块:
import loadSomething from 'bundle-loader?lazy!./Something'
const Loading = ()=> <div>Loading...</div>
<Bundle load={loadSomething}>
{(mod) => (
// do something w/ the module
)}
</Bundle>
<Bundle load={loadSomething}>
{(Comp) => Comp
? <Comp/>
: <Loading/>
)}
</Bundle>
这里可以看看bundle-loader到底干了什么。bundle-loader的源码很简单，其代码中的注释部分，对其所做的处理写得很清楚：
/*
Output format:
var cbs = [],
data;
module.exports = function(cb) {
if(cbs) cbs.push(cb);
else cb(data);
}
require.ensure([], function(require) {
data = require("xxx");
var callbacks = cbs;
cbs = null;
for(var i = 0, l = callbacks.length; i < l; i++) {
callbacks[i](data);
}
});
*/
到这里，其实大家也能看出来了，bundle-loader只是做了我们在上一个方案中要做的事情，但是结合Bundle组件，我们对需要进行代码分割的部分的处理，就可以变得非常简单了。下面是我的一个项目中的部分代码，对需要进行分割的代码进行的处理：
import React, {Component} from 'react'
import {Layout } from 'antd'
import SideBar from '../components/sideBar'
import {Router, Route, Redirect} from 'react-router'
import createHashHistory from 'history/createHashHistory'
import CustomTable from 'bundle-loader?lazy&name=customTable!../components/table'
import CustomChart from 'bundle-loader?lazy&name=customChart!../components/chart'
import Bundle from '../components/lazyload'
const Loading = function () {
return <div>Loading...</div>
}
const createComponent = (component) =>() => (
<Bundle load={component}>
{
(Component) => Component?<Component />:<Loading/>
}
</Bundle>
)
export default class WholePage extends Component {
constructor(args) {
super(args)
this.history = createHashHistory()
}
render() {
const { Header, Footer, Sider, Content } = Layout
return (
<Layout style={{height:'100%'}}>
<Header style={{background:'#7dbcea'}}>Header</Header>
<Layout>
<Sider style={{background:'#3ba0e9'}} >
<SideBar history={this.history}/>
</Sider>
<Layout>
<Content style={{background:'white'}} >
<Router history={this.history}>
<div>
<Redirect from="/" to="/personalInfo" />
<Route path="/personalInfo" component={createComponent(CustomTable)}/>
<Route path="/chart" component={createComponent(CustomChart)}/>
</div>
</Router>
</Content>
<Footer style={{background:'#7dbcea'}}>Footer</Footer>
</Layout>
</Layout>
</Layout>
)
}
}
这样，Route组件只需要一个component，就可以同时面对分割代码与不分割这两种情况。而且正如react-router官网上所说的那样，react-router本身与我们如何对代码的加载进行处理没有任何关系，从而避免侵入到项目的具体处理逻辑中。
最后，我在测试这个新特性的时候，写了一个小的测试用例。这是这个demo的github地址:https://github.com/xiiiAtCn/code-split-v4/tree/master希望能对碰到这些问题的朋友有帮助。
