react-router 4实现代码分割(code spliting)
官方一开始推荐的使用bundle-loader
来做代码分割的方式感觉有点麻烦,而且代码看起来有点不舒服。而且需要一直依赖bunder-loader
一开始我想为什么不能像vue一样,直接使用ES的新特性import()
来实现呢,后来在网上一查,果然有大神实现了这个方案。
这个方案看起来非常简洁,只需要封装一个HOC即可,大体的代码如下
import React from 'react';
export default function asyncComponent(importComponent) {
class AsyncComponent extends React.Component {
constructor(props) {
super(props);
this.state = {component: null};
}
async componentDidMount() {
const {default: component} = await importComponent();
this.setState({component});
}
render() {
const Comp = this.state.component
return Comp ? <Comp {...this.props} /> : null;
}
}
return AsyncComponent;
}
以后在引入组件是只需要一个简单的调用即可
const AsyncAbout = asyncComponent(() => import('./views/about.js'));
顺便吐槽下,react-router4真的要比react-router3难用多了,真的恶心。怀恋当时直接使用require.ensure()就可以实现code spliting的时候
我个人的react练手项目在 https://github.com/lznism/xiachufang-react,项目比较简洁,欢迎star交流~
react-router 4实现代码分割(code spliting)的更多相关文章
- React配合Webpack实现代码分割与异步加载
这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- 打包优化实践(如何Code Spliting)
项目地址:ReactSPA 使用 webpack 插件找出占用空间较大的包 开发环境中可使用 analyze-webpack-plugin 观察各模块的占用情况.以该项目为例:浏览器中输入 http: ...
- React中的代码分割
代码分割想要解决的问题是:经打包工具
- React router动态加载组件-适配器模式的应用
前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- react-router4.x 实用例子(路由过渡动画、代码分割)
react-router4.2.0实用例子 代码分割 官网上面写的代码分割是不支持create-react-app脚手架的,要使用import实现 创建一个bundle.js文件 import { C ...
- 【Web前端Talk】React-loadable 进行代码分割的基本使用
随着项目功能的扩充.版本迭代,我们与Webpack捆绑起来的的项目越来越大,大到开始影响加载速度了.这时我们就该考虑如何对代码进行拆分了. 这次我们一起学习一下如何对React项目中的代码进行Code ...
- webpack指南(二)code spliting+懒加载
code spliting 把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件. 代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大缩减加载时 ...
- webpack练手项目之easySlide(二):代码分割(转)
在上一篇 webpack练手项目之easySlide(一):初探webpack 中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...
随机推荐
- css3图片模糊过滤特效
体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- C#基础知识(一)自己总结的。。。
一.变量的声明 访问修饰符 数据类型 变量名: 访问修饰符:public ,private,protected 变量的访问修饰符默认为private eg: Public Int a: a=10 ...
- 2017-2018-1 1623 bug终结者 冲刺002
bug终结者 冲刺002 by 20162329 张旭升 今日冲刺任务: 能够显示主菜单和功能 游戏需要提供主菜单让玩家进行游戏设置,同时能能够把地图文件中的信息转换成为图像显示到游戏界面上 能够实现 ...
- Linux学习--线程控制
关于线程控制,主要就是几个模块,我们一个一个消灭.消化: 一.线程创建: 1.先来看看在Linux环境下的线程创建函数: 分析:意思很明显: 1.函数名是 pthread_create : 2.功能 ...
- ajax的四种type类型
1.GET请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行多少次操 ...
- OO第一次阶段性总结
经过三次作业的历练之后终于来到了写博客这一周.回顾开学来的这一个月,令我印象最深刻也是最累的一门课就是OO了.虽然上学期学过一部分Java,但这学期开学就来的OO作业还是让我在第二周就开始熬夜了.不过 ...
- C# 使用 ffmpeg 进行音频转码
先放一下 ffmpeg 的官方文档以及下载地址: 官方文档:http://ffmpeg.org/ffmpeg.html 下载地址:http://ffmpeg.org/download.html 用 f ...
- Python内置函数(12)——str
英文文档: class str(object='') class str(object=b'', encoding='utf-8', errors='strict') Return a string ...
- 百度echarts使用--y轴label数字太长难以全部显示
问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...
- hadoop fs:du统计hdfs文件(目录下文件)大小的用法
hadoop fs 更多用法,请参考官网:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html 以下是我的使用统计文件时使用的记录: [t@d ...