react-router按需加载(V4版)

前段时间，因为项目有按需加载的要求，于是就添加了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希望能对碰到这些问题的朋友有帮助。