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 相关文章推荐
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
vue 中固定导航栏的实例代码
Nov 01 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
javascript定义函数的方法
2010/12/06 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python中文字符串截取问题
2015/06/15 Python
Python实现控制台进度条功能
2016/01/04 Python
详解python持久化文件读写
2019/04/06 Python
python版DDOS攻击脚本
2019/06/12 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
美国糖果店:Sugarfina
2019/02/21 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
二手房购房协议书范本
2014/10/05 职场文书
幼师个人总结范文
2015/02/28 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
甲午大海战观后感
2015/06/02 职场文书
2015大学迎新标语
2015/07/16 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书