React-router 4 按需加載的實現方式及原理(Code Splitting)

fuchenxuan 發布于2019-08-21 15:50 / 3290人閱讀

摘要：的按需加載方式中實現按需加載只需要按照下面代碼的方式實現就可以了。配置按需加載方式創建文件這個文件其實是個通過包裝后的組件來使用，下面會具體講這個東西。

React-router 4

介紹了在router4以后，如何去實現按需加載Component，在router4以前，我們是使用getComponent的的方式來實現按需加載的，router4中，getComponent方法已經被移除，下面就介紹一下react-router4是入圍和來實現按需加載的。

1.router3的按需加載方式

route3中實現按需加載只需要按照下面代碼的方式實現就可以了。

const about = (location, cb) => {
    require.ensure([], require => {
        cb(null, require("../Component/about").default)
    },"about")
}

//配置route

2.router4按需加載方式（three steps） one step:

創建Bundle.js文件,這個文件其實是個通過bundle-loader包裝后的組件來使用，下面會具體講這個東西。

import React from "react";
import PropTypes from "prop-types";

class Bundle extends React.Component {
  state = {
    // short for "module" but that"s a keyword in js, so "mod"
    mod: null
  }

  componentWillMount() {
    // 加載初始狀態
    this.load(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps);
    }
  }

  load(props) {
    // 重置狀態
    this.setState({
      mod: null
    });
    // 傳入組件的組件
    props.load((mod) => {
      this.setState({
        // handle both es imports and cjs
        mod: mod.default ? mod.default : mod
      });
    });
  }

  render() {
    // if state mode not undefined,The container will render children
    return this.state.mod ? this.props.children(this.state.mod) : null;
  }
}

Bundle.propTypes = {
  load: PropTypes.func,
  children: PropTypes.func
};

export default Bundle;

second step:

import aContainer from "bundle-loader?lazy!./containers/A"

const A = (props) => (
  
      //這里只是給this.props.child傳一個方法，最后在Bundle的render里面調用
    {(Container) => }
  
)

third step:

 render() {
    return (
      
        Welcome!
        
        
      
    )
  }

3.router4按需加載方方式解析 (1).首先解釋一下按需加載，通俗的將就是我當前的location在Home,那么我只應該加載Home的東西，而不應該去加載About等等其他的。 (2).Bundle.js這個文件的作用

先看這段代碼：

module.exports = function (cb) {
    __webpack_require__.e/* require.ensure */(2).then((function (require) {
        cb(__webpack_require__(305));
    }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
};

這里是我們通過import loadDashboard from "bundle-loader?lazy!./containers/A"這種方式引入的container控件。我們使用了bundle-loader將A的源碼轉化成了上面的代碼，具體實現大家可以看bundle-loader源碼，代碼很少。

上面說到Bundle.js其實就使用來處理這個文件的，這個文件需要一個callback的參數，在Bundle的load方法中，我們會設置這個callback，當路由要調到A Container這里的時候，就回去加載A Container,然后調用這個callback，這個callback會調用setState方法，將我們之前傳入的load設置給mod，然后渲染出來。

4.webpack進行bundle-loader統一配置

這里匹配的是src/routers/下面的containers文件夾下面所有的js文件，包括二級目錄。

  {
      // 匹配routers下面所有文件
      // ([^/]+)/?([^/]*) 匹配xxx/xxx 或者 xxx
      test: /containers/([^/]+)/?([^/]*).jsx?$/,
      include: path.resolve(__dirname, "src/routers/"),
      // loader: "bundle-loader?lazy"
      loaders: ["bundle-loader?lazy", "babel-loader"]
    }

5.部分源碼

1.bundle-loader的源碼

/*
    MIT License http://www.opensource.org/licenses/mit-license.php
    Author Tobias Koppers @sokra
*/
var loaderUtils = require("loader-utils");

module.exports = function() {};
module.exports.pitch = function(remainingRequest) {
    this.cacheable && this.cacheable();
    var query = loaderUtils.getOptions(this) || {};
    if(query.name) {
        var options = {
            context: query.context || this.options.context,
            regExp: query.regExp
        };
        var chunkName = loaderUtils.interpolateName(this, query.name, options);
        var chunkNameParam = ", " + JSON.stringify(chunkName);
    } else {
        var chunkNameParam = "";
    }
    var result;
    if(query.lazy) {
        result = [
            "module.exports = function(cb) {
",
            "    require.ensure([], function(require) {
",
            "        cb(require(", loaderUtils.stringifyRequest(this, "!!" + remainingRequest), "));
",
            "    }" + chunkNameParam + ");
",
            "}"];
    } else {
        result = [
            "var cbs = [], 
",
            "    data;
",
            "module.exports = function(cb) {
",
            "    if(cbs) cbs.push(cb);
",
            "    else cb(data);
",
            "}
",
            "require.ensure([], function(require) {
",
            "    data = require(", loaderUtils.stringifyRequest(this, "!!" + remainingRequest), ");
",
            "    var callbacks = cbs;
",
            "    cbs = null;
",
            "    for(var i = 0, l = callbacks.length; i < l; i++) {
",
            "        callbacks[i](data);
",
            "    }
",
            "}" + chunkNameParam + ");"];
    }
    return result.join("");
}

/*
Output format:

    var cbs = [],
        data;
    module.exports = function(cb) {
        if(cbs) cbs.push(cb);
        else cb(data);
    }
    require.ensure([], function(require) {
        data = require("xxx");
        var callbacks = cbs;
        cbs = null;
        for(var i = 0, l = callbacks.length; i < l; i++) {
            callbacks[i](data);
        }
    });

*/

2.A的源碼

import React from "react";
import PropTypes from "prop-types";
import * as reactRedux from "react-redux";
import BaseContainer from "../../../containers/ReactBaseContainer";

class A extends BaseContainer {
  constructor(props) {
    super(props);
    this.renderCustom = function renderCustom() {
      return (
        
          Hello world In A
        
      );
    };
  }
  render() {
    // 返回父級view
    return super.render();
  }
}

A.propTypes = {
  dispatch: PropTypes.func,
};

function mapStateToProps(state) {
  return { state };
}

export default reactRedux.connect(mapStateToProps)(A);

3.route.js的源碼

import React from "react";
import { BrowserRouter, Switch, Link } from "react-router-dom";
import { Route } from "react-router";
import PostContainer from "../containers/PostsContainer";
// 設置trunk文件的名字  the basename of the resource
import aContainer from "./containers/A";
import bContainer from "./containers/B";
import cContainer from "./containers/C";
import Bundle from "../utils/Bundle";

const A = () => (
  
    {Component => }
  
)

const app = () =>
  
    {/* path = "/about" */}
    {/* "/about/" 可以，但"/about/1"就不可以了 exact 配置之后，需要路徑絕對匹配,多個斜杠沒有關系，這里直接在瀏覽器里面設置還有問題*/}
    {/* path = "/about/" */}
    {/* "/about/1" 可以，但"/about"就不可以了 用了strict，path要大于等于的關系，少一個斜杠都不行 */}
    {/* exact 和 strick 都用了就必須一模一樣，連斜杠都一樣 */}
     Link to about
    
    
    {/* 
     */}
  
;
export default function () {
  // 用來判斷本地瀏覽器是否支持刷新
  const supportsHistory = "pushState" in window.history;
  return (
    
      
        {app()}
      
    

  );
}

更新(按需加載) oneStep

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;

      return C ?  : null;
    }
  }

  return AsyncComponent;
}

Second Step

const Buttons = asyncComponent(() => import("./button"));

babel 中需要配置一下

"presets": [
        [
          "es2015"
        ],
        "stage-1", // 應用了es7的語法，所以必須有這個配置
        "react"
      ],

文章引用

http://henleyedition.com

react-router官方文檔

云服務器 GPU云服務器 react-router4 主機托管所需的平均費用情況及運作方式從云端服務器加載的原理 volatile的實現原理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88276.html

react-router4 +react-loadable 實現Code Splitting

摘要：之前在中文官方文檔使用的是。實現按需加載，升級之后，這個方法就走不通了。之后看了的官網，按需加載只需要神器。之前在react-router中文官方文檔使用的是require。ensure實現按需加載，升級之后，這個方法就走不通了。之后看了react-router的官網，按需加載只需要神器 react-loadable 。react-loadable的好處：基于import()的自...

BaronZhang 2019-08-22 16:58 評論0 收藏0
webpack and react-router按需加載

showImg(https://segmentfault.com/img/bVbph8o?w=2300&h=1224); 原理：CommonJS與import() 方法一：CommonJS模塊語法利用require.ensure,require.ensure()是webpack特有的，已經被import()取代。方法 require.ensure( dependencies: String...

lowett 2019-08-23 15:37 評論0 收藏0
拒絕Redux文檔“毒害” 一個項目告訴你Redux最新真正哲學

摘要：之前分享過幾篇關于技術棧的原創文章解析前端架構學習復雜場景數據設計干貨總結打造單頁應用一個項目理解最前沿技術棧真諦一個工程實例今天進一步剖析一個實際案例移動網頁版。目前面臨的問題在于提高產品的各方面性能體驗。之前分享過幾篇關于React技術棧的原創文章：解析Twitter前端架構學習復雜場景數據設計 React Conf 2017 干貨總結1: React + ES next ...

YuboonaZhang 2019-08-22 11:04 評論0 收藏0
【翻譯】基于 Create React App路由4.0的異步組件加載（Code Splitting

摘要：基于路由的異步組件加載本文章是一個額外的篇章，它可以在你的中，幫助加快初始的加載組件時間。但是，我們靜態地在頂部導入路由中的所有組件。當然我們的程序是相當小的，并且分離在各個部分的小組件，是不需要這樣子按需加載的。基于 Create React App路由4.0的異步組件加載本文章是一個額外的篇章，它可以在你的React app中，幫助加快初始的加載組件時間。當然這個操作不是完全必...

fredshare 2019-08-20 17:46 評論0 收藏0

發表評論

登陸后可評論

0條評論

fuchenxuan

男|高級講師

我要關注我要私信

TA的文章

EuroHoster：萬圣節促銷，首月5折，荷蘭機房/保加利亞機房，€2.5/月

閱讀 1599·2021-11-02 14:48
Flutter 初體驗

閱讀 3651·2019-08-30 15:56
promise以及async、await學習總結

閱讀 2767·2019-08-30 15:53
PHP商城的搜索功能

閱讀 3208·2019-08-30 14:09
CSS:編碼規范

閱讀 3094·2019-08-30 12:59
前端面試必問題答疑（1）

閱讀 2853·2019-08-29 18:38
js設計模式 --- 工廠設計模式(抽象工廠)

閱讀 2693·2019-08-26 11:41
express.js框架中間件（middleware）

閱讀 2209·2019-08-23 16:45

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

React-router 4 按需加載的實現方式及原理(Code Splitting)

介紹了在router4以后，如何去實現按需加載Component，在router4以前，我們是使用getComponent的的方式來實現按需加載的，router4中，getComponent方法已經被移除，下面就介紹一下react-router4是入圍和來實現按需加載的。

route3中實現按需加載只需要按照下面代碼的方式實現就可以了。

創建Bundle.js文件,這個文件其實是個通過bundle-loader包裝后的組件來使用，下面會具體講這個東西。

Welcome!

文章引用

相關文章

***react-router4 +react-loadable 實現Code* *Splitting***

**webpack and react-router按需加載**

拒絕Redux文檔“毒害” 一個項目告訴你Redux最新真正哲學

【翻譯】基于 Create React App路由4.0的異步組件加載（Code Splitting

發表評論

0條評論

fuchenxuan

男|高級講師

TA的文章

EuroHoster：萬圣節促銷，首月5折，荷蘭機房/保加利亞機房，€2.5/月

Flutter 初體驗

promise以及async、await學習總結

PHP商城的搜索功能

CSS:編碼規范

前端面試必問題答疑（1）

js設計模式 --- 工廠設計模式(抽象工廠)

express.js框架中間件（middleware）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

React-router 4 按需加載的實現方式及原理(Code Splitting)

介紹了在router4以后，如何去實現按需加載Component，在router4以前，我們是使用getComponent的的方式來實現按需加載的，router4中，getComponent方法已經被移除，下面就介紹一下react-router4是入圍和來實現按需加載的。

route3中實現按需加載只需要按照下面代碼的方式實現就可以了。

創建Bundle.js文件,這個文件其實是個通過bundle-loader包裝后的組件來使用，下面會具體講這個東西。

Welcome!

文章引用

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

介紹了在router4以后，如何去實現按需加載Component，在router4以前，我們是使用getComponent的的方式來實現按需加載的，router4中，getComponent方法已經被移除，下面就介紹一下react-router4是入圍和來實現按需加載的。

route3中實現按需加載只需要按照下面代碼的方式實現就可以了。

創建Bundle.js文件,這個文件其實是個通過bundle-loader包裝后的組件來使用，下面會具體講這個東西。