react-route4 按需加载配置心得

Posted coderhero

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-route4 按需加载配置心得相关的知识,希望对你有一定的参考价值。

本篇文章主要记录笔者项目中使用 react-route + webpack 做路由按需加载的心得,可能只有笔者一个人看,权当日记了。
 
很久很久以前,react-route还是2.X和3.X版本的时候,我们是这样做按需的:
 
const routes = {
        path: ‘/‘,
        component: AppCom,
        indexRoute: {
            component: Admin
        },
        childRoutes: [
            {
                path: ‘edit/:id‘,
                getComponent: (nextState, cb) => {
                    require.ensure([], (require) => {
                        cb(null, require(‘../entry/admin/edit.jsx‘))
                    })
                }
            }
        ]
    }
<Router routes={routes} history={hashHistory} />

 

由于笔者公司需要做按需加载的项目并不多,所以在很长一段时间里,笔者对于按需的印象都一直停留在这个阶段。
 
时间到了2018年3月,笔者总算是能用上按需了,这回我们直接上最新版的react-route,版本号4.1.1。
 
新版的react-route相比老版本,改动的程度很大,require.ensure虽然还能用,但是getComponent却已经被处理掉了,笔者根据官方文档摸索了很久,结果官方文档的案例没有一个能看的,直到笔者看到了这篇文章:https://www.jianshu.com/p/547aa7b92d8c
 
这里介绍的,就是这篇文章中提到的使用Bundle来做按需的方式。
 
我们需要引入Bundle.js作为一个加载器,其代码如下:
import React from ‘react‘;

export default class Bundle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mod: null
        };
    }

    componentWillMount() {
        this.load(this.props)
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.load !== this.props.load) {
            this.load(nextProps)
        }
    }

    load(props) {
        this.setState({
            mod: null
        });
        props.load().then((mod) => {
            this.setState({
                mod: mod.default ? mod.default : mod
            });
        });
    }

    render() {
        return this.state.mod ? this.props.children(this.state.mod) : null;
    }
}

 

配置路由页部分代码:
import Bundle from ‘./Bundle‘;
const routeObj = {
    url1:‘url1/url1‘,
    url2:‘url2/url2‘,
    url3:‘url3/url3‘,
}
let components = {};
for(let route in routeObj){
    components[route] = (props) => (
        <Bundle load={() => import(`../entry/${routeObj[route]}`)}>
            {(Component) => <Component {...props}/>}
        </Bundle>
    );
}

 

这里需要注意,import不支持直接使用变量作为参数,webpack官方解释如下:
 
技术分享图片
 
也就是说,import后至少要有一部分是真实路径,所以才有了
import(`../entry/${routeObj[route]}`)}

 

路由声明代码:
<Route exact path="/" component={components.url1}/>

 

webpack配置:
output: {
    path: paths.appBuild,
    filename: ‘[name].bundle.js‘,
    chunkFilename: ‘[name].bundle.js‘
 }

 

这样就完成了按需的配置,开发者工具中也能看到按需加载的代码块了。
 
在这里,我想吟诗一首:
 
啊~~
我编不下去了
 

以上是关于react-route4 按需加载配置心得的主要内容,如果未能解决你的问题,请参考以下文章

利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载

react-router v4 按需加载的配置方法

React-Router4 按需加载的4种实现

[转] react-router4 实现按需加载

前端性能优化之按需加载(React-router+webpack)

webpack v3 结合 react-router v4 做 dynamic import — 按需加载(懒加载)