react-router4 配合webpack require.ensure 实现异步加载的示例


Posted in Javascript onJanuary 18, 2018

实现异步加载的方法,归根结底大都是根据webpack的require.ensure来实现

第一个是自己使用require.ensure实现,

第二种 使用loader实现

今天我们说的是使用bundle-loader来实现,这样代码更优雅些。

首先需要安装bundle-loader ,具体使用npm还是yarn,就看你的包管理使用的是啥了。

下面需要一个bundle.js

import React, { Component } from 'react';
export default class Bundle extends 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(mod => {
      this.setState({
        mod: mod.default ? mod.default : mod
      });
    });
  }

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

然后把bundle.js 引进来,同时也把需要做异步的文件引进来,但是前面需要添加

bundle-loader?lazy&name=[name]!

比如:

import Bundle from './components/bundle.js';
import ListComponent from 'bundle-loader?lazy&name=[name]!./file/List.jsx';

下面就是添加路由这块的配置:

<Route path="/list" component={List} />

以及配置output的chunkFilename

chunkFilename: '[name]-[id].[chunkhash:4].bundle.js'

chunkFilename配置好以后,异步加载进来的文件名称就会按照上面的命名方式来展示,如果不配置,就是webpack给生成的数字了。

上面的都配置好了以后,就是怎么使用bundle了,你看到route上配置的component对应的是List,所以我们需要写一个List:

const List = (props) => (
  <Bundle load={ListComponent}>
    {(List) => <List {...props}/>}
  </Bundle>
);

到这里基本上就配置完了,这个时候你本地重启服务,然后点击对应的路由,就会看到异步记载的js:List-0.094e.bundle.js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
js中document.write的那点事
Dec 12 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
分享ES6的7个实用技巧
Jan 18 #Javascript
vue 动态修改a标签的样式的方法
Jan 18 #Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 #Javascript
Nuxt.js踩坑总结分享
Jan 18 #Javascript
Nuxt.js实战详解
Jan 18 #Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 #Javascript
ajax请求data遇到的问题分析
Jan 18 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python 处理数据的实例详解
2017/08/10 Python
Python生成器generator用法示例
2018/08/10 Python
Django工程的分层结构详解
2019/07/18 Python
Django实现基于类的分页功能
2019/10/31 Python
python与mysql数据库交互的实现
2020/01/06 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
趣味体育活动方案
2014/02/08 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
新任教师自我鉴定
2014/02/24 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
语文教师求职信范文
2015/03/20 职场文书
房屋维修申请报告
2015/05/18 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书