Rax 介绍

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

Rax vs React

• Size 大小 Rax (17KB) 相比 React (128KB) 有非常明显的优势,  这个非常适合 2C 注重性能的业务。
• SSR 渲染耗时用相同的功能初步对比了一下，初步看 Rax 要比 React 快(页面逻辑不够复杂, 不太明显)。

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

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

• 安装 rax 和 rax-dom 依赖
• 在 webpack.config.js

module.exports= {
  '''
  resolve: {
    alias: {
      'react': 'rax/lib/compat',
      'react-dom': 'rax-dom'
    }
  }
 
  '''
}

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

SSR 渲染转换相对复杂一些，这个涉及 Node Server Render 部分逻辑改造，但总体上 Rax 与 React 在设计上保持一致。因 easy 整个体系可解耦，可扩展，可组合的特点，所以可以很方面的的实现 Egg Rax SSR 解决方案(Preact 也一样)。<br /> <br />首先按照上面前端渲染配置 webpack alias,  然后安装以下两个插件即可实现 Egg React SSR 项目转换为 Egg Rax SSR 项目:<br />

• egg-view-rax-ssr
• egg-webpack-rax

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

目前整个方案可正常运行，更多实现待挖掘和完善。欢迎关注 easy-team 系列。