react 技术栈项目轻量化方案调研
react 技术栈项目轻量化方案调研
团队的新项目,无论是pc端的还是移动端的,都已全面转移到了 react 的技术栈。
然而,对移动端来说,react 框架脚本的体量还是有些偏大。
在后续项目比较成熟,需要重点考虑性能的时候,如何优化其加载,是一个不得不考虑的问题。
寻找方案
优化加载,我首先想到的便是找寻替代的精简后的框架脚本。正如 jquery 时代 zepto 所做的那样。
经过一番查找,最终找到三个看上去可行的开源项目,preact
react-lite
rax
。
接下来就是对他们一一尝试,引入到现有项目,看是否可行了,然后对比选出一个合适的。
现有项目情况
现有项目通过单独加载 react 和 react-dom 两个框架脚本,完成 react 的引入。
<!--react 15.4.2 --><script src="/static/js/lib/react.js"></script><script src="/static/js/lib/react-dom.js"></script>
另外,现有项目还引入了 react-router@2
来构建 spa。
加载大小如下图:
preact
介绍
preact 项目的介绍是 “Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM. ”
即 preact 项目的目的就是提供一个执行更快,体量更小的 react 官方库的替代。
适配
参考项目文档,通过一下代码,完成适配。
<!-- preact 8.1.0 --><script src="/static/js/lib/preact.min.js"></script><script src="/static/js/lib/proptypes.js"></script><script src="/static/js/lib/preact-compat.min.js"></script><script>ReactDOM = React = preactCompat;</script>
效果
运行现有项目,功能均正常,替代有效。加载大小如下图:
react-lite
介绍
react-lite 项目的介绍是 “an implementation of React that optimizes for small script size”
不管是从项目的命名还是介绍都可以看出,项目的目的就是为了精简 react 的体量
适配
完成 react-lite 的适配很简单,引入的脚本只有一个。
<!-- react-lite 0.15.33 --><script src="/static/js/lib/react-lite.min.js"></script><script>ReactDOM = React;</script>
效果
运行现有项目,功能均正常,替代有效。加载大小如下图:
rax
介绍
rax 项目的介绍是 “A universal React-compatible render engine. ”
从描述看,其目的并不是为了解决 react 体量的问题的。只是其接口也是按兼容 react 的方式开发,同时体量也苗条。
若后续还有向其他平台迁移的打算,似乎用它也不错,所以我也决定试一试。
适配
<!-- rax 0.3.2 --><script src="/static/js/lib/rax.min.js"></script><script>React = ReactDOM = Object.assign({__esModule: undefined}, Rax);</script>
效果
因为 rax 没有实现 createClass() 方法,导致无法兼容 react-router@2 所以最终适配不成功。
但单纯渲染 demo 中的用例没有问题。不过和 react 还是有不少差异,具体见 https://alibaba.github.io/rax/guide/compare-react。
因此若是要优化现有项目,还是不用考虑。
结论
在只有 preact 和 react-lite 可行的情况下。对比几个关键因素:
preact | react-lite | |
---|---|---|
大小(react是7.5+37.2=44.7) | 3.7+2.5+3.8=10(理论上合并后会再小一点) | 10.7 |
github star | 9140 | 1438 |
在综合项目的活跃度,贡献者等因素,个人觉得,preact 应该是最好的选择。
转载于:https://www.cnblogs.com/snadn/p/6826207.html
react 技术栈项目轻量化方案调研相关推荐
- 实战react技术栈+express前后端博客项目(8)-- 前端管理界面标签管理+后端对应接口开发...
项目地址:https://github.com/Nealyang/R... 本想等项目做完再连载一波系列博客,随着开发的进行,也是的确遇到了不少坑,请教了不少人.遂想,何不一边记录踩坑,一边分享收获呢 ...
- 实战react技术栈+express前后端博客项目(3)-- 后端路由、代理以及静态资源托管等配置说明...
项目地址:github.com/Nealyang/Re- 本想等项目做完再连载一波系列博客,随着开发的进行,也是的确遇到了不少坑,请教了不少人.遂想,何不一边记录踩坑,一边分享收获呢.分享当然是好的, ...
- bim 模型web页面展示_HTML5/WebGL技术BIM模型轻量化Web浏览解决方案
原标题:HTML5/WebGL技术BIM模型轻量化Web浏览解决方案 互联网技术的兴起极大地改变了我们的娱乐.生活和生产方式.尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化,大 ...
- React技术栈探究-Redux
React技术栈耕耘 -- Redux Redux 是近年来提出的 Flux 思想的一种实践方案,在它之前也有 reflux . fluxxor 等高质量的作品,但短短几个月就在 GitHub 上获近 ...
- 如何从零学习 React 技术栈
为什么要学习 React? 首先,React 相较于其他框架,其生态圈发展最为完整成熟,有非常多现成的.完整的解决方案. 其次,它适用于大中型应用的开发,便于团队中多人之间协作,很多大厂都在正式的项目 ...
- React 技术栈在蚂蚁金服的实践
在2017在线技术峰会"阿里开源项目最佳实践"上,蚂蚁金服前端工程师崔晓斌为大家带来了"React 技术栈在蚂蚁金服的实践"的演讲.主要从研发的模式变迁开始说起 ...
- 遗传算法优化rbf神经网络自校正控制的初值_【技术帖】轻量化设计中的NVH性能自动优化方法...
摘 要:噪声.振动与声振粗糙度 (Noise,Vibration and Harshness,NVH)性能的自动优化是实现多学科联合优化的基础条件.以白车身模型的零件厚度作为设计变量,以针对动刚度性能 ...
- 深入react技术栈(11):样式处理
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣 基本样式设置 样式中的像素值 使用className库 Css Modules css模块化遇到了哪些问题 css模块化方案 样式默认 ...
- 深入react技术栈(12):组件内通信
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣获取前后端知识 父组件向子组件传值 子组件向父组件传值 跨级组件通信 没有嵌套关系的组件通信 文章参考深入React技术栈
最新文章
- 使用mod_proxy_balancer实现负载均衡
- checkIP.sh
- c语言编程 输入螺旋数组,C语言 经典题目螺旋矩阵 实例详解
- 【解析】基础实验4-2.5 关于堆的判断 (25 分)
- 用eclipse配置spket编写extjs代码方法
- Mac远程服务器文件上传rz和sz的安装使用
- 小程序web开发框架-weweb介绍 1
- 【转】LoadRunner中事务和集合点的放置顺序问题
- 经典排序算法(十三)--奇偶排序Odd-even Sort
- Arcpy 去除shp文件ZM值代码及工具箱
- IDEA中安装TeaVM插件
- OMG: daily scrum nine
- CMake 安装与卸载
- 条形码是什么,主要有什么区别
- java色号_RGB颜色与16进制颜色的换算方法
- 微信小店二次开发_怎么吧微信小店装修的更好看
- 简述计算机五种常见动画及特点。【可拆成多个简答】
- 【毕设项目】基于单片机的遥控小车设计与实现 - 嵌入式 物联网 stm32 c51
- 流量明星不灵了,与ta糊不糊无瓜。
- Reflective反射机制解析
热门文章
- [以太坊源代码分析] I.区块和交易,合约和虚拟机
- 【David Silver强化学习公开课】-6:Value Function Approximation
- TensorFlow for Hackers - Part III
- android surfaceflinger研究----SurfaceFlinger loop
- 关于fullcalendar里显示json格式的events(java)
- JZOJ 5376. 【NOIP2017提高A组模拟9.19】Candy
- 单源最短路 SPFA 算法模板
- docker yum php mysql_Centos下 使用Docker, 配置PHP+Nginx+Mysql(多PHP版本)
- 利用xsl和xml转html没有内容_P系列2代码页转pdf后篇
- 大学有哪些专业python_python就业方向有哪些?