react-router4以后動態(tài)加載解決辦法（code-split）

FingerLiu 發(fā)布于2019-08-20 16:38 / 2785人閱讀

摘要：都升級到了，之前用的，想用新建個項目用一下首先是用法變了，使用了，本以為錯誤在這里，折騰半天發(fā)現(xiàn)不是，第二官方的方案看文檔，不多說，但是，一定會遇到如下報錯了半天，里，方法里，改寫為世界安靜了地址

react-router都升級到5.0了，之前用的2.*，想用create-react-app新建個項目用一下

首先是react-router-redux用法變了，使用了ConnectedRouter，本以為錯誤在這里，折騰半天發(fā)現(xiàn)不是，

ReactDOM.render(
    
        
           
        
    ,
    document.getElementById("root")
)

第二官方的code-split方案https://reacttraining.cn/web/...

看文檔，不多說，但是，一定會遇到如下報錯

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null. Check your code at index.js:44.
    in Bundle (at index.js:43)
    in Abouts (created by Route)
    in Route (at index.js:56)
    in div (at index.js:54)
    in App (at index.js:67)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (at index.js:66)
    in Provider (at index.js:65)

google了半天，
bundle.js里，render方法里，改寫

render() {
    return this.props.children(this.state.mod)
  }

為：

return this.state.mod ? this.props.children(this.state.mod) : null

世界安靜了

github地址：https://github.com/jiangbo201...

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

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

webpack and react-router按需加載

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

lowett 2019-08-23 15:37 評論0 收藏0
webpack源碼分析之二：code-splitting

摘要：前言是最引人矚目的特性之一此特性將代碼分離到不同的文件中。功能分析官網(wǎng)上有三種方式實現(xiàn)入口起點使用選項手動分離代碼。防止重復使用去重和分離。本質(zhì)則是多個入口的，則在以為入口文件將多入口的切分為按切割文件通過加載。前言 code-splitting是webpack最引人矚目的特性之一,此特性將代碼分離到不同的bundle文件中。詳細介紹官網(wǎng)code-split,這次實現(xiàn)則在筆者上次文件...

wudengzan 2019-08-22 17:32 評論0 收藏0
2017前端性能優(yōu)化清單

摘要：性能最好具有可量化可監(jiān)測以及可改動的特性。下文是一份年的前端性能優(yōu)化清單，闡述了作為前端開發(fā)人員，為了確保反饋速度以及瀏覽器兼容性我們需要考慮的問題。地圖設計的決定違背了性能理念，所以他在這份清單內(nèi)的順序有待考慮。 2017前端性能優(yōu)化清單你開始使用漸進啟動了么？是不是已經(jīng)使用過React和Angular中tree-shaking和code-splitting兩個工具？有沒有用過Br...

verano 2019-08-20 13:45 評論0 收藏0
2017前端性能優(yōu)化清單

摘要：性能最好具有可量化可監(jiān)測以及可改動的特性。下文是一份年的前端性能優(yōu)化清單，闡述了作為前端開發(fā)人員，為了確保反饋速度以及瀏覽器兼容性我們需要考慮的問題。地圖設計的決定違背了性能理念，所以他在這份清單內(nèi)的順序有待考慮。 2017前端性能優(yōu)化清單你開始使用漸進啟動了么？是不是已經(jīng)使用過React和Angular中tree-shaking和code-splitting兩個工具？有沒有用過Br...

kycool 2019-08-30 15:52 評論0 收藏0
2017前端性能優(yōu)化清單

摘要：性能最好具有可量化可監(jiān)測以及可改動的特性。下文是一份年的前端性能優(yōu)化清單，闡述了作為前端開發(fā)人員，為了確保反饋速度以及瀏覽器兼容性我們需要考慮的問題。地圖設計的決定違背了性能理念，所以他在這份清單內(nèi)的順序有待考慮。 2017前端性能優(yōu)化清單你開始使用漸進啟動了么？是不是已經(jīng)使用過React和Angular中tree-shaking和code-splitting兩個工具？有沒有用過Br...

CollinPeng 2019-08-01 16:12 評論0 收藏0