极致性能 - Egg React SSR 无缝升级为 Egg Rax SSR 项目
发布于 5 个月前 作者 hubcarl 2556 次浏览 来自 分享

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 快(页面逻辑不够复杂, 不太明显)。

rax-react.png

前端渲染 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 React 工程体系方案一致, 只需要把 Egg React 工程体系方案 涉及的对应插件和配置改成上面的插件方式即可。 骨架代码见 egg-react-webpack-boilerplate 项目的 rax 分支

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

2 回复

rax-server-renderer放在哪里?

👍👍👍 加上 babel-plugin-transform-jsx-to-html 这个 babel 的 plugin, Rax 的性能优势会更明显,预计可以达到 React 的 6x 。 这是一个 Rax SSR 的 benchmark

回到顶部