React 路由懒加载

feng409 发布于2019-08-23 12:29 / 1650人阅读

摘要：传统的两种方式符合提议的语法，该提案与普通语句或函数的类似，但返回一个对象。使用方式配置文件中使用必须将放置在的最右侧业务代码中使用前缀代表需要懒加载的正常使用原理来颗小星星

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


const Foo = require.ensure([], () => {
    require("Foo");
}, err => {
    console.error("We failed to load chunk: " + err);
}, "chunk-name");

//react-router2 or 3

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 正常使用

原理： https://github.com/rongchangh... 来颗小星星

done

GPU云服务器云服务器懒加载懒加载异常 javascript懒加载懒加载session

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98597.html

如何优化你的超大型React应用【原创精读】

摘要：往往纯的单页面应用一般不会太复杂，所以这里不引入和等等，在后面复杂的跨平台应用中我会将那些技术一拥而上。构建极度复杂，超大数据的应用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React为了大型应用而生，Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力，Taro则赋...

cfanr 2019-08-02 15:36 评论0 收藏0
如何优化你的超大型React应用【原创精读】

摘要：往往纯的单页面应用一般不会太复杂，所以这里不引入和等等，在后面复杂的跨平台应用中我会将那些技术一拥而上。构建极度复杂，超大数据的应用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React为了大型应用而生，Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力，Taro则赋...

codecook 2019-08-26 10:17 评论0 收藏0
如何优化你的超大型React应用【原创精读】

摘要：往往纯的单页面应用一般不会太复杂，所以这里不引入和等等，在后面复杂的跨平台应用中我会将那些技术一拥而上。构建极度复杂，超大数据的应用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React为了大型应用而生，Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力，Taro则赋...

xiguadada 2019-08-30 15:44 评论0 收藏0
The Cost Of JavaScript 2018 精读

摘要：目前我们的业务项目采用的来进行优化和首屏性能提升。可变性需要让开发人员降低开发时的基准线，来保证每一个用户的体验。对于路由的切分以及库的引入来说，这一个原则至关重要。快速生成一份站点的性能审查报告。 The Cost Of JavaScript 2018 关于原文原文是在Medium上面看到的，Chrome工程师Addy Osmani发布的一篇文章，这位的Medium上面的自我介绍里...

lushan 2019-08-26 12:19 评论0 收藏0
react-lazy-load粗读

摘要：粗读近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下的库的实现。之先别关注，按他给注释说测试用。之是组件绑定事件时会触发的函数。 react-lazy-load粗读近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下 react-lazy-load 的库的实现。懒加载这里懒加载场景不是路由...

dailybird 2019-08-26 12:13 评论0 收藏0