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 相关文章推荐
JSONP之我见
Mar 24 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
原生JS实现拖拽功能
Dec 16 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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默认安装产生系统漏洞
2006/10/09 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
php防攻击代码升级版
2010/12/29 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python机器学习实战之树回归详解
2017/12/20 Python
使用Python设计一个代码统计工具
2018/04/04 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
法学专业毕业生自荐信范文
2013/12/18 职场文书
统计工作个人总结
2015/03/03 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript
Javascript的promise,async和await的区别详解
2022/03/24 Javascript
我收到了德劲DE1107
2022/04/05 无线电