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页面. 例如: // ...
随机推荐
- AC日记——[网络流24题]骑士共存 cogs 746
746. [网络流24题] 骑士共存 ★★☆ 输入文件:knight.in 输出文件:knight.out 简单对比时间限制:1 s 内存限制:128 MB 骑士共存问题 «问题描述: ...
- Javascript 评估用户输入密码的强度
什么是一个安全的密码呢? 1.如果密码少于5位,那么就认为这是一个弱密码. 2.如果密码只由数字.小写字母.大写字母或其它特殊符号当中的一种组成,则认为这是一个弱密码. 3.如果密码由数字.小写字母. ...
- HDU 5790 Prefix(Hash + 主席树)
题目链接 Prefix 题意 给定一个字符串序列,求第$l$个字符串到第$r$个字符串之间有多少个不同的前缀 强制在线 考虑$Hash$ 首先把所有前缀都$hash$出来,按顺序组成一个长度不超过 ...
- JVM加载的初始化类
首先Throws(抛出)几个自己学习过程中一直疑惑的问题: 1.什么是类加载?什么时候进行类加载? 2.什么是类初始化?什么时候进行类初始化? 3.什么时候会为变量分配内存? 4.什么时候会为变量赋默 ...
- Android自定义控件之自定义组合控件(三)
前言: 前两篇介绍了自定义控件的基础原理Android自定义控件之基本原理(一).自定义属性Android自定义控件之自定义属性(二).今天重点介绍一下如何通过自定义组合控件来提高布局的复用,降低开发 ...
- Hierarchical data in postgres
https://coderwall.com/p/whf3-a/hierarchical-data-in-postgres --------------------------------------- ...
- SDUTOJ 2826 小P寻宝记——好基友一起走
#include<iostream> #include<memory.h> using namespace std; int dp[10010]; int max(int a, ...
- Nginx优化指南+LINUX内核优化+linux连接数优化+nginx连接数优化
Most setup guides for Nginx tell you the basics - apt-get a package, modify a few lines here and the ...
- 机器学习(Machine Learning)&深度学习(Deep Learning)资料
机器学习(Machine Learning)&深度学习(Deep Learning)资料 機器學習.深度學習方面不錯的資料,轉載. 原作:https://github.com/ty4z2008 ...
- Android开发之实现锁屏功能
锁屏须要引入设备超级管理员.在文档Android开发文档的Administration中有具体的说明. Android设备管理系统功能和控制訪问. 主要有一下几个步骤: 1 创建广播接收者,实现De ...