其实几种实现都是近似的，但具体上不太一样，其中有些不需要用到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

第二种：Bundle组件配合webpack组件bundle-loader

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

https://segmentfault.com/a/1190000009539836

第三种：简书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

结论是：第三种是目前我认为最好的，实现最简单。

React-Router4按需加载的更多相关文章

  1. react路由按需加载方法

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

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

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

  3. 配置react / antd 按需加载 并且使用less（react v16）

    1.开启项目   并且执行 yarn eject 下载好我们需要的插件(babel-plugin-import   less  less-loader   antd  react-loadable   ...

  4. react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)

    react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFil ...

  5. 快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）

    一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...

  6. react 实现路由按需加载

    import() 方法: async.js 文件内容: import React from 'react'; // import "babel-polyfill"; //compo ...

  7. Ant Design React按需加载

    Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm install ant --save 2.引用 ...

  8. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  9. React引入AntD按需加载报错

    背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...

  10. React 按需加载 - 代码分隔

    代码分隔 我们现在大多数React项目都是以Webpack 或者 Browserify等将一堆的jsx文件组织一起,并且由一个类似index.js的入口文件串联起来的单页面web页面. 例如: // ...

随机推荐

  1. Sublime Text 新文本编辑器（txt3）

    http://www.sublimetext.com/

  2. Delphi GDI对象之脱屏位图（Offscreen Bitmaps），也叫内存位图

    http://www.cnblogs.com/pchmonster/archive/2012/07/09/2583613.html 脱屏位图(Offscreen Bitmaps) 脱屏位图,也叫内存位 ...

  3. 饼系列—圈饼 doughnut

    chartControl属性 ApplicationSettings: Name:控件名字 AccessibleDescription: ??? AccessibleName:??? Accessib ...

  4. jenkins发布java项目

    前言:这台jenkins服务器的环境是前几篇博客一步步做实验做过来,如果有想做这篇博客的实验的朋友,可以移驾去看一下前几篇博客,另外有看着博客做完的博友,可以在下方留言,证明我做的这些都是对的,有看着 ...

  5. CDOJ 879 摩天轮 dp+斜率优化

    原题链接:http://www.acm.uestc.edu.cn/#/problem/show/879 题意: 中文题 题解: 这是一道斜率dp的题. 先把$a$数组排个序. 令$dp[i][j]$表 ...

  6. spring与事务管理

    就我接触到的事务,使用最多的事务管理器是JDBC事务管理器.现在就记录下在spring中是如何使用JDBC事务管理器 1)在spring中配置事务管理器 <!-- JDBC事务 -->   ...

  7. redis 延迟消息

    1.查询下redis 是否打开了键空间通知功能 发现打开了,如果没有打开可以在执行下 我们可以看到参数设置 2.订阅下键空间或者事件通知 订阅键空间:subscribe __keyspace@0__: ...

  8. Oracle SOA Suite OverView

    SOA是一场架构的变革,那既然是变革,那就一定是有内在的原因来推动这个架构的变革.在过去几十年的时间里面,应用程序架构已经经历了3次巨大的变革,从Terminal/主机--> Client/Se ...

  9. 椭圆人头跟踪bmp图像序列 BMP Image Sequences for Elliptical Head Tracking

    BMP Image Sequences for Elliptical Head Tracking The BMP image sequences used in the head tracking d ...

  10. mycat安装和测试

    mycat安装和测试 一．  环境准备 本机环境是三台centos6.5 IP 主机名 数据库名 安装软件 192.168.17.4 master db1 mycat,mysql 192.168.17 ...