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 相关文章推荐
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
node.js实现爬虫教程
Aug 25 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
php判断文件上传图片格式的实例详解
2017/09/30 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
使用javascript做的一个随机点名程序
2014/02/13 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
原生JS进行前后端同构
2018/04/22 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
浅谈Python 对象内存占用
2016/07/15 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
python学习笔记之多进程
2020/08/06 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
优秀通讯员事迹材料
2014/01/28 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python