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 动态生成方法的例子
Jul 22 Javascript
javascript 模拟点击广告
Jan 02 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
vue-cli项目使用mock数据的方法(借助express)
Apr 15 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
php4的彩蛋
2006/10/09 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
用Python给文本创立向量空间模型的教程
2015/04/23 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
python中可以声明变量类型吗
2020/06/18 Python
python中entry用法讲解
2020/12/04 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
中东奢侈品市场:Coveti
2019/05/12 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
中国梦口号
2014/06/13 职场文书
党员民主评议自我评价
2014/10/20 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2014年项目工作总结
2014/11/24 职场文书
大雁塔英文导游词
2015/02/10 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis