react-router4按需加载的4种实现

关键词：

其实几种实现都是近似的，但具体上不太一样，其中有些不需要用到bundle-loader

 

第一种：ReactTraining/react-router 介绍的基于 webpack, babel-plugin-syntax-dynamic-import, 和 react-loadable.

主要是利用了react-loadable这个高级组件，他是专门用来异步加载（也可以预加载）组件的。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/code-splitting.md

 

第二种：SF网友介绍的Bundle组件配合webpack组件bundle-loader

bundle-loader效用其实和require.ensure()一样，把组件分片成单独的chunk，在Bundle组件中引入

https://segmentfault.com/a/1190000009539836

 

但是我尝试的时候发现总是报错说不要在import中引入webpack的loader。。。

然后我继续查，发现第三种实现

 

第三种：简书AlienZHOU介绍的同样基于create-react-app的方式，在Bundle组件中props入一个()=>import(‘path‘)函数

http://www.jianshu.com/p/547aa7b92d8c

 

第四种，create-react-app文档给的react-router按需加载实现：用一个类Bundle组件的异步函数

https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

这种方式我试了下，确实能分片，但是讨论里有人指出性能上不如Bundle组件，那个人好像还是Create-react-app的主要贡献者

 

四种方式我都试过，期间。。这个过程略痛苦。。。不过结论是：第三种是目前我认为最好的，基于create-react-app，且实现最简单。

但是较大的项目，一般我们都会eject出来自己配置webpack啦，其实影响也不大。

 

react-router4.x路由按需加载(代码片段)

react-router4代码分割（按需加载）官方文档  https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html 1.未采用路由按需加载的代码importReactfrom‘react‘;importReactDOMfrom‘react-dom‘;importRout 查看详情

react-routerv4按需加载的配置方法

...源，这会大大影响页面的加载速度和用户体验。所以添加按需加载功能是必要的，以下是配置按需加载的方法：安装bundle-loadernpminstall--save-devbundle-loader定义Bundle.jsimportReact,Componentfrom‘react‘;exportdefaultclassBundlee 查看详情

flutter学习可滚动widget上(代码片段)

...布局模型：基于RenderBox的盒布局模型基于RenderSliver的按需加载列表布局Sliver的作用是：加载子组件并确定每一个子组件的布局和绘制信息，如果Sliver可以包含多个子组件时，通常会实现按需加载模型。可滚动组件... 查看详情

[react-router]react-router4中＜router＞组件有几种类型？(代码片段)

[react-router]React-Router4中<Router>组件有几种类型？HashRouter：老浏览器的history,主要通过hash来实现，对应createHashHistory()BrowserRouter：高版本浏览器,通过html5里面的history，对应createBrowserHistory()**MemeoryRouter：**... 查看详情

vue项目实现路由按需加载(路由懒加载)的3种方式

...载 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件/*vue异步组件技术*/path:‘/home‘,name:‘home‘,component:resolve=>require([‘@/components/home‘],resolve),path:‘/index‘,name:‘Ind... 查看详情

vue项目实现路由按需加载的3种方式(代码片段)

...步加载vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.但是,这种情况下一个组件生成一个js文件/*vue异步组件技术*/path:‘/home‘,name:‘home‘,component:resolve=>require([‘@/components/home‘],resolve),path:‘/index‘,name:‘Index‘,... 查看详情

react-router4实现代码分割（codespliting）(代码片段)

官方一开始推荐的使用bundle-loader来做代码分割的方式感觉有点麻烦，而且代码看起来有点不舒服。而且需要一直依赖bunder-loader一开始我想为什么不能像vue一样，直接使用ES的新特性import()来实现呢，后来在网上一查，果然有大神... 查看详情

react-router面试题汇总

[react-router]React-Router怎么获取URL的参数？[react-router]在history模式中push和replace有什么区别？[react-router]React-Router4中＜Router＞组件有几种类型？[react-router]React-Router怎么设置重定向？[react-router]React-Router怎么获... 查看详情

vue按需加载(代码片段)

vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure() 1.vue异步组件技术vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。但是，这种情况下一个组件生成一个js文件。代码如下：pat... 查看详情

无法使用 react-router 4 以编程方式重定向

】无法使用react-router4以编程方式重定向【英文标题】：Unabletoredirectprogrammaticallywithreact-router4【发布时间】：2017-09-1811:02:51【问题描述】：我已经阅读了很多关于这个主题的文档和SOF问题，我使用了很多方法来做到这一点，但它... 查看详情

使用 React-Router 4 和 Redux-Promise 重定向用户

】使用React-Router4和Redux-Promise重定向用户【英文标题】：RedirectuserwithReact-Router4andRedux-Promise【发布时间】：2018-02-1816:09:21【问题描述】：我有一个简单的用例，在React-Router4和Redux环境中似乎很难实现。当用户登录时，会触发redux... 查看详情

react-router4.0踩到的坑

接手的项目需要二次开发，项目是使用的react+react-router4.0+antd+redux来开发的，由于之前用的是react-router2.0，react-router2.0和4.0之间变化还是挺多的，在这里记录一下踩到遇到的问题1.dom组件不再在react-router中引入，而是在react-router-d... 查看详情

react16+react-router4从零打造企业级电商后台管理系统

第1章课程介绍本章整体介绍该课程的内容，让同学们了解这个课程的特点和学习方法，以及后台管理系统开发前的一些前置工作，如需求分析、技术选型和数据接口等。第2章课前知识储备本章介绍一些后面课程要用到的一些基... 查看详情

react-router4.x

react-router的4.X版本的方法引入和网上常见教程有了一些区别，建议最好看官网文档Link的引入　　import{Link}from‘react-router-dom‘<Linkto="/about">About</Link>Router的引入　import{Router}from‘react-router‘importcreateBrowserHistoryfr 查看详情

React-Router 和 webpack-dev-server 重新加载

】React-Router和webpack-dev-server重新加载【英文标题】：React-Routerandwebpack-dev-serverreloading【发布时间】：2018-01-2506:48:17【问题描述】：我一直在使用react-routerv4并注意到在重新加载时（例如localhost:8080/route1我会得到CannotGetroute1。我对... 查看详情

react-router4.0的初探

react-router升级4.0以后出现了 ‘react-router-dom‘引入时要import{BrowserRouter,Route}from ‘react-router-dom‘;<Providerstore={store}key="provider"><BrowserRouterhistory={history}onUpdate={()=> 查看详情

react-router4.0升级攻略

   react-router4.0出来好9了，项目在4月份的时候对react-router进行了升级，升级耗费了3天，一个坑一个坑踩了过来。   按照公司项目情况说下升级改了哪些，项目使用的是hashHistory，（BrowserHistory的情况就不清... 查看详情

项目复盘：通过动态脚本，实现按需加载语言包

...好，我是前端西瓜哥，是一名前端开发。最近做了一个将按需加载语言包的需求，有不少收获，这里记录一下。原来项目是将所有的语言包合并在一起，放到一个JSON文件里然后被引入。打包后的脚本里，有完整的语言包的代码... 查看详情