Rax 介绍

Rax 在 DSL 层面与框架设计方面借鉴了 React 的部分思想，但是舍弃了 React 部分传统的 API，所以体积上更加轻量，渲染更快，可以无缝把 React 项目转换为 Rax 项目。在做 2C 业务时，比较关注页面渲染性能以及对应的秒开率，业务折损率，到达率以及参与率。除了不可控因素外，JS 大小也会严重影响页面白屏和首屏时间(JS加载和JS解析)，这个已经在实际业务中得到验证。所以想在 Size 大小方面进行一些实践。经过调研，社区有提供了对应的轻量级兼容 React 的解决方案 PReact 和 Rax。为了更贴近本职周边技术体系, 这里暂先研究 Rax 解决方案。

Rax vs React

  • Size 大小 Rax 相比 React 有非常明显的优势, 这个非常适合 2C 注重性能的业务。
  • SSR 渲染耗时用相同的功能初步对比了一下，初步看 Rax 要比 React 快(页面逻辑不够复杂, 不太明显)。
模块 大小(压缩) SSR 渲染耗时
Rax 17KB render: 6.794ms
render: 1.439ms
render: 3.877ms
render: 2.353ms
render: 3.455ms
render: 1.704ms
render: 5.495ms
render: 1.680ms
render: 1.208ms
render: 2.751ms
render: 1.784ms
render: 1.820ms
render: 1.850ms
render: 1.320ms
render: 1.760ms
render: 0.872ms
React 128KB render: 8.283ms
render: 5.603ms
render: 2.629ms
render: 2.747ms
render: 4.049ms
render: 7.660ms
render: 4.906ms
render: 4.475ms
render: 1.115ms
render: 1.626ms
render: 1.476ms
render: 1.557ms
render: 2.519ms
render: 1.248ms
render: 1.934ms

前端渲染 React 项目转换为 Rax 项目

按如下操作即可实现 React 项目转换为 Rax 项目

  • 安装 rax 和 rax-dom 依赖
  • 在 webpack.config.js 
  1. module.exports= {
  2.   '''
  3.   resolve: {
  4.     alias: {
  5.       'react': 'rax/lib/compat',
  6.       'react-dom': 'rax-dom'
  7.     }
  8.   }
  10.   '''
  11. }

Egg React SSR 项目转换为 Egg Rax 项目

SSR 渲染转换相对复杂一些，这个涉及 Node Server Render 部分逻辑改造，但总体上 Rax 与 React 在设计上保持一致。因 easy 整个体系可解耦，可扩展，可组合的特点，所以可以很方面的的实现 Egg Rax SSR 解决方案(Preact 也一样)。

首先按照上面前端渲染配置 webpack alias, 然后安装以下两个插件即可实现 Egg React SSR 项目转换为 Egg Rax SSR 项目:

使用上面与 Egg React 工程体系方案一致， 只需要把 Egg React 工程体系方案 涉及的对应插件和配置改成上面的插件方式即可。 骨架代码见 egg-react-webpack-boilerplate 项目的 rax 分支。

目前整个方案可正常运行，更多实现待挖掘和完善。