其实几种实现都是近似的，但具体上不太一样，其中有些不需要用到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. 关于unity3d插件的自动打包

    开发中,迩可能会遇到在xcode里添加一些需要调用原生api的方法,可能是game center,可能是内购之类的,但是这些插件实在太多了,所以迩大可不必自己写这些插件,问题在于,国内的一些插件,像9 ...

  2. js库-AngularJS

    我是一个不思进取的前端. 我想按部就班的工作. 我想得过且过. 老天呀!你咋又逼迫我学习对于我来说的新知识呢!!!!!!!我想哭呀!!!!! 在某个代码项目中我看到了{{??}}这么个标记!我的神呀! ...

  3. js - 锚点-scrollIntoView()

    document.getElementById("view").scrollIntoView(false);

  4. Gym 101917 E 简单计算几何，I 最大流

    题目链接 https://codeforces.com/gym/101917 E 题意:给定一个多边形(n个点),然后逆时针旋转A度,然后对多边形进行规约,每个点的x规约到[0,w]范围内,y规约到[ ...

  5. (3)unity3d 地形

    在Hierarchy(层次) 建一个Terrain(地形) Terrain属性按钮 第一个按钮:抬升与下陷地面.单击抬升地形,同时按住shift下陷地形 第二个按钮:绘制高度.同时按住shift绘制等 ...

  6. logging模块配置共享以及使用文件配置

    1.配置共享 如果每个文件都配置logging,那就太繁琐了,logging提供了父子模块共享配置的机制, 会根据Logger的名称来自动加载父模块的配置.首先定义一个 main.py 文件: imp ...

  7. luogu P1018 乘积最大

    题目描述 今年是国际数学联盟确定的"2000――世界数学年",又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的数学智力竞赛的活动,你的一 ...

  8. 搭建高可用服务注册中心-Spring Cloud学习第一天(非原创）

    文章大纲 一.Spring Cloud基础知识介绍二.创建单一的服务注册中心三.创建一个服务提供者四.搭建高可用服务注册中心五.项目源码与参考资料下载六.参考文章   一.Spring Cloud基础 ...

  9. gradle_____最后到齐的构建工具

    从今年开始,开始换用gradle 了,个人感觉还好,配置不像maven,一堆xml 文件,一个jar 一行字符,内置的task 和很多.自定义task 也挺简单,比ant简单一些. 简单配置文件示例: ...

  10. deferred 对象

    转载,原文连接:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html ...