React 路由懒加载的几种实现方案


Posted in Javascript onOctober 23, 2018

这篇文字简单的介绍了React在路由懒加载方面的几种实现方案。

传统的两种方式

import()

符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象。这意味着模块时异步加载的

webpack v2+ 使用

使用方式

function component() {
 return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => {
  var element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
 }).catch(error => 'An error occurred while loading the component');
}

// 或者使用async

async function getComponent() {
 var element = document.createElement('div');
 const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
 element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 return element;
}

require.ensure

webpack指定的使用方式

webpack v1 v2 指定使用方式

使用方式

require.ensure([], function(require){
  var list = require('./list');
  list.show();
,'list');

<!-- Router -->
const Foo = require.ensure([], () => {
  require("Foo");
}, err => {
  console.error("We failed to load chunk: " + err);
}, "chunk-name");

//react-router2 or 3
<Route path="/foo" getComponent={Foo} />

lazyload-loader

相对于前两种,此种方式写法更为简洁。

使用方式

// webpack 配置文件中 使用lazyload-loader(必须将lazuyload-loader 放置在use的最右侧)

module: {
  rules: [
   {
    test: /\.(js|jsx)$/,,
    use: [
     'babel-loader',
     'lazyload-loader'
    ]
   },

业务代码中

// 使用lazy! 前缀 代表需要懒加载的Router
 
 import Shop from 'lazy!./src/view/Shop';
 
 // Router 正常使用
 <Route path="/shop" component={Shop} />

原理 : https://github.com/rongchanghai/lazyload-loader

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

Javascript 相关文章推荐
javascript下查找父节点的简单方法
Aug 13 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
Angular2实现的秒表及改良版示例
May 10 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
react 兄弟组件如何调用对方的方法示例
Oct 23 #Javascript
详解React 的几种条件渲染以及选择
Oct 23 #Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 #Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 #Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 #Javascript
浅谈JavaScript 代码整洁之道
Oct 23 #Javascript
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
You might like
php流量统计功能的实现代码
2012/09/29 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
php生成短域名函数
2015/03/23 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
学习python需要有编程基础吗
2020/06/02 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
园林毕业生自我鉴定范文
2013/12/29 职场文书
促销活动方案模板
2014/02/24 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
防灾减灾标语
2014/10/07 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
英文投诉信格式
2015/07/03 职场文书
docker 制作mysql镜像并自动安装
2022/05/20 Servers