其实几种实现都是近似的，但具体上不太一样，其中有些不需要用到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. Scrapy学习-17-暂停和重启

    Scrapy爬虫暂停和重启 在当前项目下新建一个用于存储中间过程变量的目录 注意不同的spider不能共用一个目录 同一个spider每次运行时也必须使用新的目录 mkdir <spider_p ...

  2. 关于Red5整合springMVC提示scope not found 的错误

    https://www.cnblogs.com/qgc88:

  3. Codeforces Gym101606 E.Education (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))

    E Education 这个题有点意思,就是找满足条件的最小价格里的最大值的人数,有点贪心的思想吧,一开始写错了,人群的那个不能排序,而且是最小价格里找能住下人最多的部门,让这个部门去住这个房间.在循 ...

  4. Wireshark如何单独导出包的列信息

    Wireshark如何单独导出包的列信息   Wireshark提供了丰富的数据包导出功能.用户可以将数据包按照需要导出为各种格式.这些格式文件包含了包的各种信息.但是很多时候,用户只需要获取包的特定 ...

  5. 转 Windows串口过滤驱动程序的开发

    在Windows系统上与安全软件相关的驱动开发过程中,“过滤(filter)”是极其重要的一个概念.过滤是在不影响上层和下层接口的情况下,在Windows系统内核中加入新的层,从而不需要修改上层的软件 ...

  6. 转置卷积&&膨胀卷积

    Convolution arithmetic tutorial theano Convolution arithmetric github 如何理解深度学习中的deconvolution networ ...

  7. procomm plus

    procomm plus这是查看串口数据的软件.

  8. SASS入门之SASS安装

    当然...凭借我这样的肤浅的智商,根本不能理解什么叫certificate verfiy fail... 所以找了一段时间的方法,最后最终在一个sass群里找到了... 发在这里纯属作为自己的一个学习 ...

  9. 增加录像时间戳水印、 camera框架介绍

    http://blog.csdn.net/mirkerson/article/details/38920107 http://blog.csdn.net/jimbo_lee/article/detai ...

  10. ok6410[002] ubuntu1604系统下搭配ckermit和dnw基于RAM的裸机程序调试环境

    ubuntu1604系统下搭配ckermit和dnw基于RAM的裸机程序调试环境 系统:  ubuntu16.04 裸板: 飞凌公司OK6410开发板 目标:搭建基于ubuntu1604系统和基于RA ...