【转】专注性能的多端研发框架 - ice.js 3 正式发布！

资讯

ice.js 框架在之前的版本中，主要服务于中后台 / PC 的项目研发，而随着无线端以及多端能力的拓展，ice.js 3 将成为一套面向大淘宝技术的终端应用框架。因此在 ice.js 3 的版本中除了「开发者体验」之外，还围绕「用户体验」探索了大量技术方案。
ice.js 3 地址：https://v3.ice.work/

ice.js 研发框架是什么ice.js 研发框架是致力于简单、友好的应用研发框架，基于社区流行的 React 渲染，迄今已发布了两个大版本，并广泛服务于阿里内部和社区用户。截止 2022.11，框架在内部已服务近 9000 活跃项目，累计服务 5000+ 活跃用户。相比于社区 Webpack、Vite 等工程构建工具和 Next.js、Remix 等应用框架，ice.js 会更加侧重在以下几个方面的建设和思考：

  1. 通过框架内置以及其插件化机制保证跨项目的一致性：对于中大型团队而言，跨团队跨项目的技术方案收敛和一致性能够更好地保证协同效率
  2. 开箱即用的框架能力，减少重复建设：除了基础工程能力的支持之外，框架会结合业务上的主流 SPA、微前端等应用模式，探究业务领域的实践，比如数据请求、状态管理、权限管理、KeepAlive 等
  3. 贴近业务实践，让复杂的技术方案更好地落地：对于 SSR、FaaS 一体化应用等业务解决方案，ice.js 能更好地降低接入成本，同时打通与其他基础建设之间的连接

ice.js 3 改进了什么ice.js 框架在之前的版本中，主要服务于中后台 / PC 的项目研发，而随着无线端以及多端能力的拓展，ice.js 3 将成为一套面向大淘宝技术的终端应用框架。因此在 ice.js 3 的版本中除了「开发者体验」之外，还围绕「用户体验」探索了大量技术方案。在经历 150+ 个测试版本的迭代，以及部分内部项目的验证后，我们在 2022.11.21 正式发布 3.0 版本。这次的版本将带来以下重要特性：

  1. 多端研发：除了支持支持 PC / 无线的研发之外，还可以通过 ice.js 3 进行小程序的开发，并为多端研发提供解决方案

  2. 全新运行时：默认以 React 18 为基础 UI 框架，同时升级了路由系统默认以约定式方式进行配置，面向开发者提供更小的构建体积以及更加简单的运行时能力定制

  3. 专注性能优化：提供不同解决方案提升页面性能，包括全新的 SSR 设计、页面数据请求能力、资源预加载等

  4. 开发体验提升：引入 swc、esbuild 等原生前端工具链稳步提升构建性能，并且提供丰富的生态以便开始满足开发诉求

▐多端研发

  • PC 和无线统一

在这个版本，ice.js 从原先服务中后台开发的基础上，也全面支持了无线端应用的开发。

图片

框架将内置无线端开发的实践，比如 rpx 转 vw 将作为框架默认的能力提供。而对于原 Rax 体系下的源码资产，也可以通过兼容模式，无缝在 ice.js 3 框架下运行。

对于无线搭建体系，通过 rax-compat 的兼容，我们也能使业务的 Solution 中能够无缝支持绝大部分的 Rax 模块 运行在 ice.js 3 之上。

当然，兼容模式只是在成本上对历史源码资产的支持；之后，我们将完全站在 Web 标准 & React 栈基础上建设面向 Web 开发者的研发基线和基础设施。

  • 小程序研发

ice.js 3 的小程序研发将以运行时方案为基础，让用户可以以一码多端的方式高效的进行业务研发。在引入小程序插件之后即可开启：

1
import { defineConfig } from '@ice/app';

对于小程序窗体 window 和 导航 tabBar 相关的配置，可以在 src/app.ts 中进行配置

1
// src/app.ts

目前 ice.js 3 已支持阿里（支付宝、淘宝、钉钉等）及微信、百度、字节跳动、快手等端。

▐全新的运行时

框架默认以 react@18 和 react-router@6 为基础依赖，提供更加强大的运行时 API 和路由系统。

在 ice.js 3 中默认推荐以约定式的路由进行开发，框架将内置对加载和渲染上进行优化，帮助业务构建性能更好的应用，同时也为开发者提供了更加便捷的方式基于路由进行能力定制。
图片

▐专注性能优化

  • 资源加载

框架将对对应路由页面进行资源预加载，从原先只关心页面主 bundle 加载的场景转变为并行加载当前页面的资源。
图片

并行加载的方式有利于更快的加载脚本，由于页面访问依赖前端构建的 HTML 内容，对于前后端一体化开发的应用可以无缝享受其带来的提升。而对于常规的前后端分离项目，我们也推荐通过构建产物中的 assets-manifest.json 来预加载当前页面依赖的资源，以获得更好的页面体验。

  • 数据加载

除了资源的并行加载之外，框架对页面数据加载的编码规范做出了约定，来提前页面的数据加载时机。 通过以下方式定义的页面数据将会不在依赖主 bundle 和页面资源的加载：

1
import { defineDataLoader, useData } from 'ice';

图片

同一个项目，两种不同写法，数据请求发起时机的差异对比如下（测试环境 Chrome slow 3G)：
图片
同时框架支持终端统一的数据预请求方案，从框架层面提供开发者统一的使用方法，降低开发者认知成本，抹平不同容器侧概念的差异，并在不同端内获得当前端最极致的体验。

  • 多种渲染模式

除常规的 CSR（Client Side Render） 之外，框架还支持 SSR（Server Side Render） / SSG（Static Site Generation）。框架也提供如 useMounted 和 <BrowserOnly /> 的能力，方便应用完成差异化的渲染处理：

1
import { ClientOnly } from 'ice';

框架结合 Midway FaaS，进一步降低业务接入 SSR 应用的研发成本，除了基础的调试开发能力之外，也将在链路方案上给予支持：

图片

后续我们也将为社区开发者打通阿里云、Vercel 等平台的部署流程，方便开发者能够低成本享受 SSR 带来的体验提升。

▐稳步提升开发体验

  • 工程体验

开发者体验一直是框架重视的部分，3.0 的版本从多个维度去提升开发者的工程体验。除了默认应用 webpack 5 物理缓存之外，框架采用 swc 作为默认的编译工具来进一步提升编译时间：
图片

SSR 后续将作为推荐开启的链路，因此 server 端构建的体验也是 3.0 版本优化的重点，server 端构建基于 esbuild，并引入预编译及 ES Modules 的执行方式，让开发体验进一步得到提升：
图片

  • 稳定的依赖

框架在原先的基础上进一步优化工程依赖，对相关依赖进行预编译，对比上一个版本（ice.js 2）减少 300+ 个依赖，大小减少 90M+。

关键依赖会被预打包和锁定版本，确保使用的每个小版本均是稳定可用。

  • 配置提示

框架默认的工程配置从 build.json 变更为 ice.config.mts。开发者在获得完善的配置类型提示的同时，可以非常便捷地添加本地插件或者定制运行时能力。开发者不必再为配置出错以及不清楚 API 的导出而困扰。

1
import { defineConfig } from 'ice';

图片

下一步

ice.js 3.0 框架依旧有很多需要突破的地方，接下来将在开发者体验和用户体验持续进行打磨：

  1. 探索 React Streaming 和 Server Components 在业务下的实践，提升页面的可交互体验

  2. 进一步推进终端统一的预请求模式，让页面性能再进一步

  3. 持续优化框架开发体验，以轻量方式应用原生前端工具链，给开发者带来极致的调试体验

同时我们也会进一步加强能力生态和周边的建设，如果对框架、工具、组件体系感兴趣的开发者，欢迎参与贡献。

图片

相关链接

  1. 飞冰（ICE）站点：https://v3.ice.work/
  2. ice.js GitHub 仓库：https://github.com/alibaba/ice
  3. ICE PKG 组件开发站点：https://pkg.ice.work/
  4. ICE PKG Github 仓库：https://github.com/ice-lab/icepkg
  5. Midway：https://midwayjs.org/
  6. swc：https://swc.rs/
  7. esbuild: https://esbuild.github.io/

原文：https://mp.weixin.qq.com/s/o8XL71WPDHaui81O61QSoA

涅槃快乐热爱生活，追求技术

个人简介。