其实几种实现都是近似的,但具体上不太一样,其中有些不需要用到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. ES6的 Iterator 遍历器到底是什么?

    这节课要讲的是ES6中的Iterator. for...of为啥不遍历Object对象 第十三节我们讲了简单又实用的for...of,我们可以使用它来遍历数组,字符串,Set和Map结构,但是有没有发 ...

  2. NC使用练习之通达OA-2017版本漏洞复现后续

    利用上一篇通达OA的漏洞环境,练习NC工具的使用. 步骤: 1.本机启动nc.exe监听端口: 确认端口是否成功监听成功: 2.用冰蝎将nc.exe上传至目标机: 3.用命令行在目标机启动nc.exe ...

  3. CentOS 7 + Win 双系统的安装遇到的重要问题

    前言:对于刚学linux的朋友们,多多小小因为各种原因需要装双系统,亦或者爱好使然.多数是问题解决,第一次装系统者不推荐看-. 那么现在内德在此就说说在本本上装双系统会遇到的问题及其解决方法. 环境准 ...

  4. VHD VHDX 区别

    A Virtual hard disk is saved either with VHD or VHDX file extension. VHD is the older while VHDX is ...

  5. Cannot find or open the PDB file

    打开VS:工具 --> 选项 --> 调试-->符号接下来就是选择Microsoft,然后确认

  6. Linux网络服务第六章PXE高效能批量网络装机

    1.IP地址配置 2.关闭防火墙以及selinux状态如下 systemctl  stop     firewalld Iptables -F Setenforce 0 三.部署FTP服务 1.安装F ...

  7. 【Linux网络基础】网络拓扑、OSI层次模型、TCP/IP协议簇

    一.前言 一个运维有时也要和网络打交道,所以具备最基本的网络知识,对一个运维人员来说是必要的.但,对于我们的工作来说这些并不是重点,因此,我不可能从最基础的网络知识开始讲起.本节内容更多是从一个梳理和 ...

  8. Netty(三):IdleStateHandler源码解析

    IdleStateHandler是Netty为我们提供的检测连接有效性的处理器,一共有读空闲,写空闲,读/写空闲三种监测机制. 将其添加到我们的ChannelPipline中,便可以用来检测空闲. 先 ...

  9. Eclipse中获取html jsp 标签的属性提示信息方法

    操作方法: windows------preferences----------搜索 html----------找到 html Source这项---------找到 content assist ...

  10. 数据结构--栈(附上STL栈)

    定义: 栈是一种只能在某一端插入和删除数据的特殊线性表.他按照先进先出的原则存储数据,先进的数据被压入栈底,最后进入的数据在栈顶,需要读数据的时候从栈顶开始弹出数据(最后被压入栈的,最先弹出).因此栈 ...