react-router v4 按需加载

1. 先安装 bundle-loader 

2.安装后添加组件 bundle.jsx  这个组件是webpack官方提供

import React from 'react';
import PropTypes from 'prop-types';

 
class Bundle extends React.Component {

  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((mod) => {

    this.setState({

    mod: mod.default ? mod.default : mod

   });

  });

 }

 

  render() {

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

  }

}

 

Bundle.propTypes = {

 load: PropTypes.func,

 children: PropTypes.func

};

 

export default Bundle;

3.准备好了开始使用

在导入的路由页面组件前面加入bundle-loader?lazy!  如：import User from 'bundle-loader?lazy!../../views/User';

导入之后使用 Bundle 组件进行处理（当然Bundle 需要导入）

export const NeedLogin = (props) => (

  <Bundle load={Login}>

  { (Container) => <Container {...props} /> }

  </Bundle>

)

然后把NeedLogin 导出， 在路由组件里面导入使用即可





4.如何查看是否配置好了按需加载，方法狠简单你先配置两个页面路由的按需加载，然后在一个页面console一些文字，然后访问另外一个页面 看看会不会输出，如果没有东西输出就是配置成功了

5.我找了一下webpack 里面直接配置bundle-loader?lazy 可以找到的都是webpack1.*多的，官网也没找到webpack2.0 bundle-loader 的配置，不知道是不是我看错了，有知道的告知一下，谢谢

 有用请点赞，有错请帮忙留言指出，我好修改不误导别人 谢谢