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 项目时如何按需加载