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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
JS将unicode码转中文方法
May 08 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
javascript实现点击按钮切换轮播图功能
Sep 23 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加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
PHP解析RSS的方法
2015/03/05 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python字符串处理函数简明总结
2015/04/13 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Python3 合并二叉树的实现
2019/09/30 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
python中tab键是什么意思
2020/06/18 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
幼儿园六一儿童节活动总结
2015/02/10 职场文书
2015初中团委工作总结
2015/07/28 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP