React-router 4 按需加载的实现方式及原理详解

route3中实现按需加载只需要按照下面代码的方式实现就可以了。const about = (location, cb) => {  require.ensure([], require => {    cb(null, require('../Component/about').default)  },'about')}//配置route<Route path="helpCenter" getComponent={about} />

import React from 'react';import PropTypes from 'prop-types';class Bundle extends React.Component { state = {  // short for "module" but that's a keyword in js, so "mod"  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((mod) => {   this.setState({    // handle both es imports and cjs    mod: mod.default ? mod.default : mod   });  }); } render() {  // if state mode not undefined,The container will render children  return this.state.mod ? this.props.children(this.state.mod) : null; }}Bundle.propTypes = { load: PropTypes.func, children: PropTypes.func};export default Bundle;

import aContainer from 'bundle-loader?lazy!./containers/A'const A = (props) => ( <Bundle load={aContainer}>   //这里只是给this.props.child传一个方法，最后在Bundle的render里面调用  {(Container) => <Container {...props}/>} </Bundle>)

 render() {  return (   <div>    <h1>Welcome!</h1>    <Route path="/about" component={About}/>    <Route path="/dashboard" component={A}/>   </div>  ) }

module.exports = function (cb) {  __webpack_require__.e/* require.ensure */(2).then((function (require) {    cb(__webpack_require__(305));  }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);};

 {   // 匹配routers下面所有文件   // ([^/]+)//?([^/]*) 匹配xxx/xxx 或者 xxx   test: /containers//([^/]+)//?([^/]*)/.jsx?$/,   include: path.resolve(__dirname, 'src/routers/'),   // loader: 'bundle-loader?lazy'   loaders: ['bundle-loader?lazy', 'babel-loader']  }

var loaderUtils = require("loader-utils");module.exports = function() {};module.exports.pitch = function(remainingRequest) {  this.cacheable && this.cacheable();  var query = loaderUtils.getOptions(this) || {};  if(query.name) {    var options = {      context: query.context || this.options.context,      regExp: query.regExp    };    var chunkName = loaderUtils.interpolateName(this, query.name, options);    var chunkNameParam = ", " + JSON.stringify(chunkName);  } else {    var chunkNameParam = '';  }  var result;  if(query.lazy) {    result = [      "module.exports = function(cb) {/n",      "  require.ensure([], function(require) {/n",      "    cb(require(", loaderUtils.stringifyRequest(this, "!!" + remainingRequest), "));/n",      "  }" + chunkNameParam + ");/n",      "}"];  } else {    result = [      "var cbs = [], /n",      "  data;/n",      "module.exports = function(cb) {/n",      "  if(cbs) cbs.push(cb);/n",      "  else cb(data);/n",      "}/n",      "require.ensure([], function(require) {/n",      "  data = require(", loaderUtils.stringifyRequest(this, "!!" + remainingRequest), ");/n",      "  var callbacks = cbs;/n",      "  cbs = null;/n",      "  for(var i = 0, l = callbacks.length; i < l; i++) {/n",      "    callbacks[i](data);/n",      "  }/n",      "}" + chunkNameParam + ");"];  }  return result.join("");}/*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);    }  });*/

import React from 'react';import PropTypes from 'prop-types';import * as reactRedux from 'react-redux';import BaseContainer from '../../../containers/ReactBaseContainer';class A extends BaseContainer { constructor(props) {  super(props);  this.renderCustom = function renderCustom() {   return (    <div >     Hello world In A    </div>   );  }; } render() {  // 返回父级view  return super.render(); }}A.propTypes = { dispatch: PropTypes.func,};function mapStateToProps(state) { return { state };}export default reactRedux.connect(mapStateToProps)(A);

import React from 'react';import { BrowserRouter, Switch, Link } from 'react-router-dom';import { Route } from 'react-router';import PostContainer from '../containers/PostsContainer';// 设置trunk文件的名字 the basename of the resourceimport aContainer from './containers/A';import bContainer from './containers/B';import cContainer from './containers/C';import Bundle from '../utils/Bundle';const A = () => ( <Bundle load={aContainer}>  {Component => <Component />} </Bundle>)const app = () => <div>  {/* path = "/about" */}  {/* "/about/" 可以，但"/about/1"就不可以了 exact 配置之后，需要路径绝对匹配,多个斜杠没有关系，这里直接在浏览器里面设置还有问题*/}  {/* path = "/about/" */}  {/* "/about/1" 可以，但"/about"就不可以了 用了strict，path要大于等于的关系，少一个斜杠都不行 */}  {/* exact 和 strick 都用了就必须一模一样，连斜杠都一样 */}  <Link to="/about/"> Link to about</Link>  <Route path="/" component={PostContainer} />  <Route path="/about/" component={A} />  {/* <Route path="/home" component={B} />  <Route component={C} /> */} </div>;export default function () { // 用来判断本地浏览器是否支持刷新 const supportsHistory = 'pushState' in window.history; return (  <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>   <div>    {app()}   </div>  </BrowserRouter> );}