react-router4以后动态加载解决办法（code-split）

FingerLiu 发布于2019-08-20 16:38 / 2792人阅读

摘要：都升级到了，之前用的，想用新建个项目用一下首先是用法变了，使用了，本以为错误在这里，折腾半天发现不是，第二官方的方案看文档，不多说，但是，一定会遇到如下报错了半天，里，方法里，改写为世界安静了地址

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

首先是react-router-redux用法变了，使用了ConnectedRouter，本以为错误在这里，折腾半天发现不是，

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...

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

转载请注明本文地址：https://www.ucloud.cn/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特有的，已经被import()取代。方法 require.ensure( dependencies: String...

lowett 2019-08-23 15:37 评论0 收藏0
webpack源码分析之二：code-splitting

摘要：前言是最引人瞩目的特性之一此特性将代码分离到不同的文件中。功能分析官网上有三种方式实现入口起点使用选项手动分离代码。防止重复使用去重和分离。本质则是多个入口的，则在以为入口文件将多入口的切分为按切割文件通过加载。前言 code-splitting是webpack最引人瞩目的特性之一,此特性将代码分离到不同的bundle文件中。详细介绍官网code-split,这次实现则在笔者上次文件...

wudengzan 2019-08-22 17:32 评论0 收藏0
2017前端性能优化清单

摘要：性能最好具有可量化可监测以及可改动的特性。下文是一份年的前端性能优化清单，阐述了作为前端开发人员，为了确保反馈速度以及浏览器兼容性我们需要考虑的问题。地图设计的决定违背了性能理念，所以他在这份清单内的顺序有待考虑。 2017前端性能优化清单你开始使用渐进启动了么？是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具？有没有用过Br...

verano 2019-08-20 13:45 评论0 收藏0
2017前端性能优化清单

摘要：性能最好具有可量化可监测以及可改动的特性。下文是一份年的前端性能优化清单，阐述了作为前端开发人员，为了确保反馈速度以及浏览器兼容性我们需要考虑的问题。地图设计的决定违背了性能理念，所以他在这份清单内的顺序有待考虑。 2017前端性能优化清单你开始使用渐进启动了么？是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具？有没有用过Br...

kycool 2019-08-30 15:52 评论0 收藏0
2017前端性能优化清单

摘要：性能最好具有可量化可监测以及可改动的特性。下文是一份年的前端性能优化清单，阐述了作为前端开发人员，为了确保反馈速度以及浏览器兼容性我们需要考虑的问题。地图设计的决定违背了性能理念，所以他在这份清单内的顺序有待考虑。 2017前端性能优化清单你开始使用渐进启动了么？是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具？有没有用过Br...

CollinPeng 2019-08-01 16:12 评论0 收藏0