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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
jquery uaMatch源代码
Feb 14 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
jquery提示效果实例分析
Nov 25 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
js实现简单的点名器随机色实例代码
Sep 20 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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
关于保护环境的标语
2014/06/09 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
公司开会通知
2015/04/20 职场文书
军事博物馆观后感
2015/06/05 职场文书