H5W3
当前位置:H5W3 > JavaScript > React > 正文

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 的配置,不知道是不是我看错了,有知道的告知一下,谢谢

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

本文地址:H5W3 » react-router v4 按需加载

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址