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

第一种:ReactTraining/react-router 介绍的基于 webpackbabel-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 按需加载的4种实现的更多相关文章

  1. route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

  2. react路由按需加载方法

    使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...

  3. React Router 按需加载+服务器渲染的闪屏问题

    伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过 ...

  4. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

  5. vue 动态路由按需加载的三种方式

    在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...

  6. vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...

  7. vue项目实现路由按需加载的3种方式

    vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...

  8. vue项目实现按需加载的3种方式

    vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: { path: '/promisedemo', name: ' ...

  9. vue项目按需加载的3种方式

    本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...

随机推荐

  1. java中有界队列的饱和策略(reject policy)

    文章目录 AbortPolicy DiscardPolicy DiscardOldestPolicy CallerRunsPolicy 使用Semaphore java中有界队列的饱和策略(rejec ...

  2. 使用3种协议搭建本地yum仓库

    关闭防火墙和selinux [root@qls yum.repos.d]# systemctl stop firewalld (stop,start,disable,enable) [root@qls ...

  3. 使用Hexo框架搭建博客,并部署到github上

    开发背景:年后回来公司业务不忙,闲暇时间了解一下node的使用场景,一篇文章吸引了我15个Nodejs应用场景,然后就被这个hexo框架吸引了,说时迟,那时快,赶紧动手搭建起来,网上找了好多资料一天时 ...

  4. Boostrap Table学习笔记

    最近要对项目上的table进行调整,让表格能够支持更多的操作,于是接触到了boostrapTable这个插件.研究了一天,记录下学习的内容. Boostrap Table可以支持表的分页及动态显示表的 ...

  5. Docker PHP7官方镜像安装Redies扩展

    2019独角兽企业重金招聘Python工程师标准>>> 直接RUN docker-php-ext-install redis 失败,google得到: ENV PHPREDIS_VE ...

  6. 通过fiddler抓取IDEA的请求

    2019独角兽企业重金招聘Python工程师标准>>> 因为fiddler默认是代理的8888端口,所以设置一下IDEA的请求使用本地的8888作为代理发出. 1."EDI ...

  7. 杭电60题--part 1 HDU1003 Max Sum(DP 动态规划)

    最近想学DP,锻炼思维,记录一下自己踩到的坑,来写一波详细的结题报告,持续更新. 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1003 Problem ...

  8. SVN 应用

    1.从服务器上down 资料 在电脑上安装SVN客户端 在电脑本地创建个文件夹作为版本库 进入 xfssvn 文件夹右击鼠标选择 SVN Checkout 或 SVN Update 输入服务器中配置好 ...

  9. SSM框架完整开发流程

    ----------------第一阶段-------------- 1.数据库建模 2.生成sql语句 3.在mysq客户端使用命令方式执行sql脚本,生成数据库 4.允许远程访问mysql GRA ...

  10. springboot后端校验

    这一篇讲解了如何定义特殊的校验 https://www.cnblogs.com/cjsblog/p/8946768.html https://blog.csdn.net/xgblog/article/ ...