本篇文章主要记录笔者项目中使用 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'
}这样就完成了按需的配置，开发者工具中也能看到按需加载的代码块了。
在这里，我想吟诗一首：
啊~~
我编不下去了