React-Router4 按需加载的4种实现
其实几种实现都是近似的,但具体上不太一样,其中有些不需要用到bundle-loader
第一种:ReactTraining/react-router 介绍的基于 webpack, babel-plugin-syntax-dynamic-import
, 和 react-loadable
.
主要是利用了react-loadable这个高级组件,他是专门用来异步加载(也可以预加载)组件的。
第二种: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 按需加载的4种实现的更多相关文章
- route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
- react路由按需加载方法
使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...
- React Router 按需加载+服务器渲染的闪屏问题
伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过 ...
- vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
- vue 动态路由按需加载的三种方式
在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...
- vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...
- vue项目实现路由按需加载的3种方式
vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...
- vue项目实现按需加载的3种方式
vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: { path: '/promisedemo', name: ' ...
- vue项目按需加载的3种方式
本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...
随机推荐
- java中有界队列的饱和策略(reject policy)
文章目录 AbortPolicy DiscardPolicy DiscardOldestPolicy CallerRunsPolicy 使用Semaphore java中有界队列的饱和策略(rejec ...
- 使用3种协议搭建本地yum仓库
关闭防火墙和selinux [root@qls yum.repos.d]# systemctl stop firewalld (stop,start,disable,enable) [root@qls ...
- 使用Hexo框架搭建博客,并部署到github上
开发背景:年后回来公司业务不忙,闲暇时间了解一下node的使用场景,一篇文章吸引了我15个Nodejs应用场景,然后就被这个hexo框架吸引了,说时迟,那时快,赶紧动手搭建起来,网上找了好多资料一天时 ...
- Boostrap Table学习笔记
最近要对项目上的table进行调整,让表格能够支持更多的操作,于是接触到了boostrapTable这个插件.研究了一天,记录下学习的内容. Boostrap Table可以支持表的分页及动态显示表的 ...
- Docker PHP7官方镜像安装Redies扩展
2019独角兽企业重金招聘Python工程师标准>>> 直接RUN docker-php-ext-install redis 失败,google得到: ENV PHPREDIS_VE ...
- 通过fiddler抓取IDEA的请求
2019独角兽企业重金招聘Python工程师标准>>> 因为fiddler默认是代理的8888端口,所以设置一下IDEA的请求使用本地的8888作为代理发出. 1."EDI ...
- 杭电60题--part 1 HDU1003 Max Sum(DP 动态规划)
最近想学DP,锻炼思维,记录一下自己踩到的坑,来写一波详细的结题报告,持续更新. 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1003 Problem ...
- SVN 应用
1.从服务器上down 资料 在电脑上安装SVN客户端 在电脑本地创建个文件夹作为版本库 进入 xfssvn 文件夹右击鼠标选择 SVN Checkout 或 SVN Update 输入服务器中配置好 ...
- SSM框架完整开发流程
----------------第一阶段-------------- 1.数据库建模 2.生成sql语句 3.在mysq客户端使用命令方式执行sql脚本,生成数据库 4.允许远程访问mysql GRA ...
- springboot后端校验
这一篇讲解了如何定义特殊的校验 https://www.cnblogs.com/cjsblog/p/8946768.html https://blog.csdn.net/xgblog/article/ ...