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 相关文章推荐
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 Javascript
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 include和require的区别深入解析
2013/06/17 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
node thread.sleep实现示例
2018/06/20 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
python中反射用法实例
2015/03/27 Python
Python下的twisted框架入门指引
2015/04/15 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python中文编码知识点
2019/02/18 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python-接口开发入门解析
2019/08/01 Python
大学生入党思想汇报
2014/01/01 职场文书
给老师的一封建议书
2014/03/13 职场文书
采购求职信
2014/03/17 职场文书
保险公司年会主持词
2014/03/22 职场文书
会计专业自荐书
2014/07/08 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
cf战队宣传语
2015/07/13 职场文书
物业管理交接协议书
2016/03/24 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
Python移位密码、仿射变换解密实例代码
2021/06/27 Python