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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
JavaScript之自定义类型
May 04 Javascript
js中生成map对象的方法
Jan 09 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
浅谈js中的this问题
Aug 31 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
分享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 gzip压缩输出的实现方法
2013/04/27 PHP
php实现telnet功能示例
2014/04/08 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
python基于socket实现网络广播的方法
2015/04/29 Python
Python制作刷网页流量工具
2017/04/23 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
学术诚信承诺书
2014/05/26 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
放射科岗位职责
2015/02/14 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python