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动态加载javascript以减少服务器压力
Oct 29 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
React组件中的this的具体使用
Feb 28 Javascript
JavaScript十大取整方法实例教程
Dec 03 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遍历目录viewDir函数
2009/12/15 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
javascript中的有名函数和无名函数
2007/10/17 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
Python中实现常量(Const)功能
2015/01/28 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
中学自我评价
2014/01/31 职场文书
家长通知书家长评语
2014/04/17 职场文书
司机岗位职责说明书
2014/07/29 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
公务员处分决定书
2015/06/25 职场文书
python编写五子棋游戏
2021/05/25 Python
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers