React 路由懒加载的几种实现方案

 更新时间:2018年10月23日 10:53:58   作者:Manster  
这篇文章主要介绍了React 路由懒加载的几种实现方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

这篇文字简单的介绍了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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • React中的Context应用场景分析

    React中的Context应用场景分析

    这篇文章主要介绍了React中的Context应用场景分析,Context 提供了一种在组件之间共享数据的方式,而不必显式地通过组件树的逐层传递 props,通过实例代码给大家介绍使用步骤,感兴趣的朋友跟随小编一起看看吧
    2021-06-06
  • 详解在React.js中使用PureComponent的重要性和使用方式

    详解在React.js中使用PureComponent的重要性和使用方式

    这篇文章主要介绍了详解在React.js中使用PureComponent的重要性和使用方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 实例讲解React 组件生命周期

    实例讲解React 组件生命周期

    这篇文章主要介绍了React 组件生命周期的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • React.js绑定this的5种方法(小结)

    React.js绑定this的5种方法(小结)

    this在javascript中已经相当灵活,这篇文章主要介绍了React.js绑定this的5种方法(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 手把手教您实现react异步加载高阶组件

    手把手教您实现react异步加载高阶组件

    这篇文章主要介绍了手把手教您实现react异步加载高阶组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • react在安卓中输入框被手机键盘遮挡问题的解决方法

    react在安卓中输入框被手机键盘遮挡问题的解决方法

    这篇文章主要给大家介绍了关于react在安卓中输入框被手机键盘遮挡问题的解决方法,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧
    2018-09-09
  • React Native 截屏组件的示例代码

    React Native 截屏组件的示例代码

    本篇文章主要介绍了React Native 截屏组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 使用React手写一个对话框或模态框的方法示例

    使用React手写一个对话框或模态框的方法示例

    这篇文章主要介绍了使用React手写一个对话框或模态框的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 浅谈redux以及react-redux简单实现

    浅谈redux以及react-redux简单实现

    这篇文章主要介绍了浅谈redux以及react-redux简单实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 详解React Hooks是如何工作的

    详解React Hooks是如何工作的

    React Hooks是在React 16.8版本新增的特性,在我看了React官网和一些博客对React Hook的讲解后还是觉得没有get到本质。本篇博客通过手动实现useState()来了解Hook的原理和本质。阅读此篇博客的前提是你要知道一些 React Hooks的基本用法和使用规则,不然会看得云里雾里。
    2021-05-05

最新评论