react-router v4 按需加载
来源:互联网 发布:算法导论英文版 百度云 编辑:程序博客网 时间:2024/05/24 06:50
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 的配置,不知道是不是我看错了,有知道的告知一下,谢谢
有用请点赞,有错请帮忙留言指出,我好修改不误导别人 谢谢
- react-router v4 按需加载
- react-router 按需加载
- react-router v4
- React Router v4
- react-router实现按需加载
- Webpack + react-router 按需加载
- webpack+react-router按需加载入门
- React router+ webpack实现:按需加载
- React Router v4 版本学习指南
- React-router中,结合webpack实现按需加载
- 聊聊 React Router v4 的设计思想
- react结合redux和react-router开发大型应用实现按需加载(code splitting)
- 使用react router V4(react-router-dom)遇到的一些问题
- react-router 从 v2/v3 to v4 迁移
- react-router V4 版本不能嵌套路由的问题
- React Router v4中component和render的区别
- react-router v4 使用 history 控制路由跳转
- react实战--antd、react-router-dom v4 解决菜单和地址同步问题
- Linux下c实现域名转IP的方法封装
- iOS开发之swift资料大全
- 六个创建型模式2:工厂方法模式-Factory Method Pattern 【学习难度:★★☆☆☆,使用频率:★★★★★】
- Eclipse/myEclipse选中变量名,选择变量后该变量在当前文件中的使用都不变灰色了 标签: javaMyEclipseEclipse同步选中效果 2013-08-18 11:27 1760
- 01刷LeetCode
- react-router v4 按需加载
- 定时任务命令
- AIDL使用教程一(传递默认类型数据)
- NekoHTML解析HTML为XML后TagName一直为大写的问题解决
- 线性表的链式存储(LinkList)
- Java面试题全集(中)
- 在Linux下使用rsync的6个实例
- JAVA解析JSON数据
- 学生管理系统(四)---查询窗体