Rax 1.1.0 大事件播报!!!

1,049 阅读5分钟

所有的前端程序员们,请注意! 在过去的 3 个月,经过 Rax 团队不懈的努力,我们 release 了 Rax 1.1.0 ,同时 Rax 周边生态也分别取得了各自的突破性进展~

Rax 内核华丽升级

我们从以下 3 个方面提升了内核的能力:

  • 性能&体积
  • 改动&修复
  • 更多的功能

性能方面:在样式和布局(主线程)上所花的事件大幅减少, Rax@1.1.0 的均值 benchmark 指标相比 Rax@1.0.0 提升了 15.8% !各项性能指标离 preact 又更近了一步:

体积方面:Rax 变得更加轻量了,我们通过冗余逻辑提取、内部变量名压缩、打包工具优化等等策略,使得 Rax@1.1.0 相比 Rax@1.0.0,Minified 体积下降 32.8%,Gzipped 体积下降 12.48%,解析编译的时间更短,初始化&启动指标更快,同时带来的最大收益是加载资源的网络成本更低!

改动&修复方面:我们做了两件事,(1)创建 VDOM 的时候对 props 做了浅复制,避免对传入对象进行副作用操作(2)在 Dev 模式下,Rax 会通过 Objeact.freeze 冻结 props,避免开发者无意或者有意对 props 进行修改。

大家比较关注的新功能方面:(1)Rax 支持运行时 PropsType 检查啦,就像下面这样:

(2) Rax 和 React 一样,对于循环渲染会通过 key 来高效的识别元素变动,这个版本,我们针对 Dev 模式添加了 key 值校验的 warning,帮助开发者写出性能更好的代码~

(3) 更好的异常提示和错误码功能,当开发者写出会触发异常的代码之后,Rax 会在 Dev 模式和 Build 模式下给出对应的错误信息:

Universal API -- 多端应用的好帮手

作为多端布局的重要环节之一,Universal API 在过去的 3 个月里支持了 30 多个阿里、微信小程序的 API,具体可以使用可以戳这里~~~关于如何快速产出抹平多端差异的 API,我们后续也会有对应的文章分享哦!!!感兴趣的同学可以持续关注我们。

小程序 -- 更好用的小程序构建方案

小程序方向在过去 3 个月,我们最大的进展,非支持微信小程序莫属了!同时,我们支持了 8 个对应的多端基础组件,开发者可以通过组装这些基础组件来完成自己的多端应用~感兴趣的同学可以动手尝试一下:

npm init rax my-app

即刻进入开发微信小程序的世界~

除了支持开发微信小程序,我们在工程、语法支持、性能上也有了大幅度的进步。

工程上,我们支持了多模式下的依赖解析处理,天然支持 less/sass/stylus,更好的错误提示、source map、多端配置。

语法上,我们支持了 JSX+ ,更加随意的在循环中绑定事件,逻辑表达式渲染等等。

性能上,我们对长列表渲染进行了自动优化,并且添加了各层数据浅 Diff,通过队列合并渲染任务从而大大提升了渲染性能。

PWA -- Web 技术的推手

我们可以说,这是经历双十一检阅过的 PWA。与其说,我们在描述过去 3 个月,Rax 团队在 PWA 上的努力,不如说我们在 Web 技术演进上做出的尝试!

Rax 团队做了哪些事情呢?(1) 工程上,我们进行了拆包、按需加载、预加载、预渲染;(2)App Shell 快速加载框架结构,让用户在尽可能短的时间内看到页面结构;(3) 无缝切换,用户在使用通过 Rax PWA 开发的 Web 应用的时候就像在用原生 App,可以接着看前一个页面上次访问到的元素;(4)快照渲染,用户通过二次访问页面,能够真正的实现秒开,话不多说,看数据

想要知道 Rax PWA 背后更多的故事,可以看这篇文章~

SSR -- 渲染性能完成 React 6x 提升

先甩出我们做了什么:

  • Fass 发布流程打通
  • 渲染性能极致提升

Fass 发布流程打通,Rax 的工程支持 Serverless 的发布模式,可被发布到阿里云、AWS 等函数托管平台,也可以集成到基于 express 、koa 的传统 Node.js 应用。

以发布到社区的 Serverless 托管平台 Now 为例,没有复杂的应用开发和申请流程,在现有 Rax 工程中,扩展一个插件,就可以一键完成 SSR 应用的上线了:

渲染性能极致提升,Rax 团队采用了静态模板 + 动态组件的混合渲染模式,让 SSR 的渲染性能达到了 React 的 6 倍

-----------compare renderToString----------
React(16.12.0)#renderToString x 1,664 ops/sec ±1.40% (84 runs sampled)
Rax(1.0.13)#renderToString x 13,411 ops/sec ±1.05% (85 runs sampled)
Preact(10.0.5)#renderToString x 1,237 ops/sec ±2.18% (84 runs sampled)

The benchmark was run on:
   PLATFORM: darwin 17.5.0
   CPU: Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
   SYSTEM MEMORY: 16GB
   NODE VERSION: v10.11.0

benchmark 地址:github.com/raxjs/serve…

如果,想要了解 SSR 背后更多的实现原理以及故事,敬请期待我们后续的文章哦~

工程 -- 多端工程的最佳实践

工程上,我们也考虑到了面向的多种用户:

结语

我们不知道能不能吸引到此刻正在看文章的你来使用 Rax。但是我们知道,我们想要创造一些我们看到的未来,并且试图去改变和推进大环境的标准以及技术解决方案,来服务更多的开发者和用户~

相关链接

zhuanlan.zhihu.com/p/94707590

zhuanlan.zhihu.com/p/84583617

zhuanlan.zhihu.com/p/84443743