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 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
关于js类的定义
Jun 28 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 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 格式化数字的时候注意数字的范围
2010/04/13 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
建筑工地标语
2014/06/18 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
2015年财政所工作总结
2015/04/25 职场文书
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android