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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
小程序实现录音功能
2020/09/22 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
python字符串中的单双引
2017/02/16 Python
Python正则捕获操作示例
2017/08/19 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Python 私有化操作实例分析
2019/11/21 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
golang/python实现归并排序实例代码
2020/08/30 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
高中生学期学习自我评价
2014/02/24 职场文书