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 相关文章推荐
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
jquery实现图片预加载
Dec 25 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
es6函数之rest参数用法实例分析
Apr 18 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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python字符类型的一些方法小结
2016/05/16 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
英国网上电器商店:Electricshop
2020/03/15 全球购物
开业庆典活动策划方案
2014/09/21 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
出售房屋协议书范本
2014/10/06 职场文书
北京导游词
2015/02/12 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
信访维稳承诺书
2015/05/04 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
会议主持词通用版
2019/04/02 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android