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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
node 解析图片二维码的内容代码实例
Sep 11 Javascript
vue开发简单上传图片功能
Jun 30 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过滤html标记属性类用法实例
2014/09/23 PHP
php服务器的系统详解
2019/10/12 PHP
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python lxml中etree的简单应用
2019/05/10 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
python mock测试的示例
2020/10/19 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
总裁办公室主任职责
2014/01/02 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
投诉信回复范文
2015/07/03 职场文书