React 路由懶加載

feng409 發(fā)布于2019-08-23 12:29 / 1669人閱讀

摘要：傳統(tǒng)的兩種方式符合提議的語(yǔ)法，該提案與普通語(yǔ)句或函數(shù)的類似，但返回一個(gè)對(duì)象。使用方式配置文件中使用必須將放置在的最右側(cè)業(yè)務(wù)代碼中使用前綴代表需要懶加載的正常使用原理來(lái)顆小星星

這篇文字簡(jiǎn)單的介紹了React在路由懶加載方面的幾種實(shí)現(xiàn)方案。

傳統(tǒng)的兩種方式 import()

符合ECMAScript提議的import()語(yǔ)法，該提案與普通 import 語(yǔ)句或 require 函數(shù)的類似，但返回一個(gè) Promise 對(duì)象。這意味著模塊時(shí)異步加載的

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

相對(duì)于前兩種，此種方式寫法更為簡(jiǎn)潔。

使用方式

// webpack 配置文件中 使用lazyload-loader（必須將lazuyload-loader 放置在use的最右側(cè)）

module: {
    rules: [
      {
        test: /.(js|jsx)$/,,
        use: [
          "babel-loader",
          "lazyload-loader"
        ]
      },

業(yè)務(wù)代碼中

 // 使用lazy! 前綴 代表需要懶加載的Router
 
 import Shop from "lazy!./src/view/Shop";
 
 // Router 正常使用

原理： https://github.com/rongchangh... 來(lái)顆小星星

done

GPU云服務(wù)器云服務(wù)器懶加載懶加載異常 javascript懶加載懶加載session

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/98597.html

相關(guān)文章

如何優(yōu)化你的超大型React應(yīng)用【原創(chuàng)精讀】

摘要：往往純的單頁(yè)面應(yīng)用一般不會(huì)太復(fù)雜，所以這里不引入和等等，在后面復(fù)雜的跨平臺(tái)應(yīng)用中我會(huì)將那些技術(shù)一擁而上。構(gòu)建極度復(fù)雜，超大數(shù)據(jù)的應(yīng)用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React為了大型應(yīng)用而生，Electron和React-native賦予了它構(gòu)建移動(dòng)端跨平臺(tái)App和桌面應(yīng)用的能力，Taro則賦...

cfanr 2019-08-02 15:36 評(píng)論0 收藏0
如何優(yōu)化你的超大型React應(yīng)用【原創(chuàng)精讀】

摘要：往往純的單頁(yè)面應(yīng)用一般不會(huì)太復(fù)雜，所以這里不引入和等等，在后面復(fù)雜的跨平臺(tái)應(yīng)用中我會(huì)將那些技術(shù)一擁而上。構(gòu)建極度復(fù)雜，超大數(shù)據(jù)的應(yīng)用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React為了大型應(yīng)用而生，Electron和React-native賦予了它構(gòu)建移動(dòng)端跨平臺(tái)App和桌面應(yīng)用的能力，Taro則賦...

codecook 2019-08-26 10:17 評(píng)論0 收藏0
如何優(yōu)化你的超大型React應(yīng)用【原創(chuàng)精讀】

摘要：往往純的單頁(yè)面應(yīng)用一般不會(huì)太復(fù)雜，所以這里不引入和等等，在后面復(fù)雜的跨平臺(tái)應(yīng)用中我會(huì)將那些技術(shù)一擁而上。構(gòu)建極度復(fù)雜，超大數(shù)據(jù)的應(yīng)用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React為了大型應(yīng)用而生，Electron和React-native賦予了它構(gòu)建移動(dòng)端跨平臺(tái)App和桌面應(yīng)用的能力，Taro則賦...

xiguadada 2019-08-30 15:44 評(píng)論0 收藏0
The Cost Of JavaScript 2018 精讀

摘要：目前我們的業(yè)務(wù)項(xiàng)目采用的來(lái)進(jìn)行優(yōu)化和首屏性能提升。可變性需要讓開(kāi)發(fā)人員降低開(kāi)發(fā)時(shí)的基準(zhǔn)線，來(lái)保證每一個(gè)用戶的體驗(yàn)。對(duì)于路由的切分以及庫(kù)的引入來(lái)說(shuō)，這一個(gè)原則至關(guān)重要。快速生成一份站點(diǎn)的性能審查報(bào)告。 The Cost Of JavaScript 2018 關(guān)于原文原文是在Medium上面看到的，Chrome工程師Addy Osmani發(fā)布的一篇文章，這位的Medium上面的自我介紹里...

lushan 2019-08-26 12:19 評(píng)論0 收藏0
react-lazy-load粗讀

摘要：粗讀近來(lái)沒(méi)什么特別要做的事，下班回來(lái)的空閑時(shí)間也比較多，所以抽空看看懶加載是怎么實(shí)現(xiàn)的，特別是看了下的庫(kù)的實(shí)現(xiàn)。之先別關(guān)注，按他給注釋說(shuō)測(cè)試用。之是組件綁定事件時(shí)會(huì)觸發(fā)的函數(shù)。 react-lazy-load粗讀近來(lái)沒(méi)什么特別要做的事，下班回來(lái)的空閑時(shí)間也比較多，所以抽空看看懶加載是怎么實(shí)現(xiàn)的，特別是看了下 react-lazy-load 的庫(kù)的實(shí)現(xiàn)。懶加載這里懶加載場(chǎng)景不是路由...

dailybird 2019-08-26 12:13 評(píng)論0 收藏0