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/jQuery 表单美化插件小结
Feb 14 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
jquery插件之easing使用
2010/08/19 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
document.write的几点使用心得
2014/05/14 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python模拟百度登录实例详解
2016/01/20 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
python如何使用腾讯云发送短信
2020/09/17 Python
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
消防安全宣传标语
2014/06/07 职场文书
党员检讨书
2014/10/13 职场文书
门店店长岗位职责
2015/04/14 职场文书