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页面. 例如: // ...
随机推荐
- express之中间件bodyParser的理解
bodyParser用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理.另外bodyParse也可以接受客户端ajax提交的json数据,以及url的 ...
- iOS内购总结
内购流程: 1. 用户先拿到购买产品的单子, 2. 拿着单子去苹果那里交钱,交完钱让苹果在单子上盖个章 3.拿着盖了章的单子传给自己的服务器来验证是否真的支付成功,服务器是跟苹果验证(我们客户端也是可 ...
- 图片点击放大并可点击旋转插件(1)-jquery.artZoom.js
1.首先加入链接: <script type="text/javascript" src="js/jquery-1.6.1.min.js">< ...
- 快速掌握RabbitMQ(五)——搭建高可用的RabbitMQ集群
RabbitMQ的集群是依赖erlang集群的,而erlang集群是通过.erlang.cookie文件进行通信认证的,所以我们使用RabbitMQ集群时只需要配置一下.erlang.cookie文件 ...
- 洛谷——P1657 选书
P1657 选书 题目描述 学校放寒假时,信息学奥赛辅导老师有1,2,3……x本书,要分给参加培训的x个人,每人只能选一本书,但是每人有两本喜欢的书.老师事先让每个人将自己喜欢的书填写在一张表上.然后 ...
- DICOM医学图像处理:Orthanc Plugin SDK实现WADO服务
背景: Orthanc是博主发现的一个很完美的DICOM和HTTP服务端开源软件,前几篇分别介绍了Orthanc的基本使用.Orthanc从0.8.0版本之后给出了Plugin SDK,通过该SDK可 ...
- 您也使用托管C++吗? 【转】
http://blog.csdn.net/Muf/article/details/656920 转向.NET后,手头上往往仍有旧的模块要重用.也许这些模块是Delphi写的,也许是C/C++写的,或者 ...
- Python基础语法03-控制流
Python 条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python程序语言指定任何非0和 ...
- git 怎样删除远程仓库的最近一次错误提交?
假设你有3个commit如下: commit 3 commit 2 commit 1 其中最后一次提交commit 3是错误的,那么可以执行: git reset --hard HEAD~1 你会发现 ...
- Android Design Support Library概览
尊重劳动成果.转载请注明出处:http://blog.csdn.net/growth58/article/details/47972467 关注新浪微博:@于卫国 邮箱:yuweiguocn@gmai ...