React-Router的按需加载实现

Router4

bundle-loader

Router4移除了getComponent，改用bundle-loader实现，其核心实现仍然是require.ensure

// 方式一
// 1.创建加载器
class LazyLoader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            component: null
        }
    }
    componentWillMount() {
        this._load();
    }
    componentWillReceiveProps(nextProps) {
        if (this.props.component != next.component) {
            return;
        }
        this._load();
    }
    _load(){
        this.props.component(comp => {
            this.setState({
                component: comp.default ? comp.default : comp
            });
        });
    }
    render() {
        const LazyComponent = this.state.component;
        return LazyComponent ? this.props.children(LazyComponent) : null;
    }
}

// 2.引用异步组件
import List from 'bundle-loader?lazy&name=lazy.[name]!./component/list.js';
//List(function(file){  // do something});

// 3.使用
const AsyncComponent = (props) => (
    <LazyLoader component={List}>
    {
        (Comp) => <Comp {...props} /> 
    }
    </LazyLoader>
)
class App extends React.Component {
    render() {
        return (
            <Router>
                <Route path="list" component={AsyncComponent}></Route>
            </Router>
        );
    }
}


// 方式二: HOC
import List from 'bundle-loader?lazy&name=lazy.[name]!./component/list.js';
function HOC(getComponent){
    return class ProxyComp extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                component: null
            }
        }
        componentWillMount() {
            this._load();
        }
        _load(){
            getComponent(comp => {
                this.setState({
                    component: comp
                });
            });
        }
        render() {
            const LazyComponent = this.state.component;
            return LazyComponent ? <LazyComponent {...this.props} /> : null;
        }
    }
}
const AsyncComponent = HOC(List);

import()

function HOC(getComponent){
    return class ProxyComp extends React.Component {
        state = { component: null }
        componentWillMount() {
            getComponent().then(res => {
                this.setState({
                    component: res.default || res
                });
            });
        }
        render() {
            const LazyComponent = this.state.component;
            return LazyComponent ? <LazyComponent {...this.props} /> : null;
        }
    }
}
const AsyncComponent = HOC(() => import('./component/list.js'));
class App extends React.Component {
    render() {
        return (
            <Router>
                <Route path="list" component={AsyncComponent}></Route>
            </Router>
        );
    }
}

Router3

require.ensure

const $FILE_PATH = './component/list.js';
function lazyLoader(_, cb){
    require.ensure([], function(){
        var module = require($FILE_PATH);
        cb(null, module.default || module);   // es6
    }, 'lazy.list')
}
class App extends React.Component {
    render() {
        return (
            <Router>
                <Route path="list" getComponent={lazyLoader}></Route>
            </Router>
        );
    }
}

import()

function lazyLoader(_, cb) {
    const List = import(/* webpackChunkName:'lazy.list' */ './component/list.js');
    List.then(module => {
        cb(null, module.default || module);
    });
}
class App extends React.Component {
    render() {
        return (
            <Router>
                <Route path="list" getComponent={lazyLoader}></Route>
            </Router>
        );
    }
}