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 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
vue中使用mockjs配置和使用方式
Apr 06 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
总结js函数相关知识点
2018/02/27 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
生产部主管岗位职责
2014/01/06 职场文书
团日活动策划书
2014/02/01 职场文书
高二物理教学反思
2014/02/08 职场文书
行政办公室岗位职责
2014/03/18 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
民事调解协议书
2016/03/21 职场文书
python for循环赋值问题
2021/06/03 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技