React-Router4按需加载
其实几种实现都是近似的，但具体上不太一样，其中有些不需要用到bundle-loader
第一种：ReactTraining/react-router 介绍的基于 webpack, babel-plugin-syntax-dynamic-import, 和 react-loadable.
主要是利用了react-loadable这个高级组件，他是专门用来异步加载（也可以预加载）组件的。
第二种：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按需加载的更多相关文章
- react路由按需加载方法
使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...
- React Router 按需加载+服务器渲染的闪屏问题
伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过 ...
- 配置react / antd 按需加载 并且使用less（react v16）
1.开启项目 并且执行 yarn eject 下载好我们需要的插件(babel-plugin-import less less-loader antd react-loadable ...
- react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)
react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFil ...
- 快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）
一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
- react 实现路由按需加载
import() 方法: async.js 文件内容: import React from 'react'; // import "babel-polyfill"; //compo ...
- Ant Design React按需加载
Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm install ant --save 2.引用 ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- React引入AntD按需加载报错
背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...
- React 按需加载 - 代码分隔
代码分隔 我们现在大多数React项目都是以Webpack 或者 Browserify等将一堆的jsx文件组织一起,并且由一个类似index.js的入口文件串联起来的单页面web页面. 例如: // ...
随机推荐
- 容器中元素的去重——ans.erase(unique(ans.begin(),ans.end()),ans.end());
啊,原来unique()函数,只是处理的连续的元素,比如 -1 -1 -1 1 2 -1 2 就处理成了 -1 1 2 -1 2 -1 -1并且返回5,之后eraser(5,7)剩下了 -1 1 2 ...
- AC日记——[USACO11DEC]牧草种植Grass Planting 洛谷 P3038
题目描述 Farmer John has N barren pastures (2 <= N <= 100,000) connected by N-1 bidirectional road ...
- 问题：Linux 输入任何命令都显示 -bash: fork: Cannot allocate memory
应该是某个程序吃掉了所有的内存,只能重启
- 小程序-支持的最小像素px
经过我手机多次测试,支持的最小px为: 8px;
- 获取某个元素相对于视窗的位置-getBoundingClientRect
1. getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 语法:这个方法没有参数 rectObject = ...
- centos 目录
http://www.iteye.com/topic/1125162 使用linux也有一年多时间了 最近也是一直在维护网站系统主机 下面是linux目录结构说明 本人使用的是centos系统,很 ...
- ListView 在设备切换横竖屏时保存状态
比如listview在设备切换横竖屏时,仍然需要保证position, activity - > onSaveInstanceState - > restoreInstanceState ...
- 把Execl表格中的数据获取出来保存到数据库中
比如我们遇到一些需要把execl表格中的数据保存到数据库中,一条一条保存效率底下而且容易出错,数据量少还好,一旦遇到数据量大的时候就会累死个人啊,下面我们就来把execl表格中数据保存到对应的数据库中 ...
- iOS -- SKEmitterNode类
SKEmitterNode类 继承自 SKNode:UIResponder:NSObject 符合 NSCoding(SKNode)NSCopying(SKNode)NSObject(NSObje ...
- VS"后生成事件" 菜单的使用
网上有很多的文章都在介绍怎样创建一个自己定义的dll文件,以及怎样使用一个dll文件,在此不在赘述.本文主要介绍怎样使用VS2008的"生成后事件"的命令行,将一个dll文件直接复 ...