ic e.js 3 ha sido lanzado oficialmente, esperando que más negocios lo usen, verifiquen y construyan juntos una mejor experiencia de usuario.
dirección ice.js 3: https://v3.ice.work/
开发者重参与
un modelo, que suele ser:
-
Desarrolle primero y luego gobierne Después de completar el desarrollo comercial e incluso estar en línea, realice una evaluación de desempeño, analice y diagnostique los puntos de optimización e implemente las estrategias de optimización correspondientes. -
Los requisitos para los desarrolladores son altos y cada desarrollador debe ser competente en el análisis de varios problemas de rendimiento y dominar las soluciones de optimización de la experiencia para varios escenarios. -
Insostenible, fácil de degradar con la iteración empresarial
▐Es a la vez una AMP y una ZEPA
-
La aplicación MPA crea HTML y JS Bundle de forma independiente para cada página, los recursos no se comparten entre páginas y los recursos compartidos se cargan y ejecutan repetidamente cuando la página salta. -
Para las aplicaciones SPA, todas las páginas reutilizan una parte de HTML y JS de entrada, confiando en el paquete principal para la coincidencia de rutas antes de cargar la página correspondiente, todo el proceso es en serie.
-
Cada página construirá su propio HTML, e introducirá los recursos requeridos por la página actual en el HTML, evitando así la carga serial de recursos. (construir clase de producto MPA) -
Al saltar entre páginas, solo se cargará el paquete específico de la página siguiente, lo que evitará la carga repetida de recursos. (Clase de lógica de carga de recursos SPA)
▐ Carga paralela de bloques
布局组件
puede
页面入口组件
anidar por múltiples y uno, también conocido como
嵌套路由
. Para tales escenarios, ice.js aplica las siguientes optimizaciones para lograr una mejor experiencia de rendimiento en la página:
-
Los componentes de diseño 资源
y数据请求
se cargarán en paralelo para lograr la mayor velocidad de carga de recursos. -
Al saltar entre rutas, como /sales/recommends
saltar a/sales/favorites
, el marco solo cargará componentes diferenciadosfavorites.tsx
para renderizar y no volverá a renderizar los comunes布局组件
.
嵌套路由
realizada , podemos
嵌套路由
organizar las partes lógicas relativamente separadas de la página de manera de obtener una mejor experiencia de carga.
Por ejemplo, las siguientes páginas comunes de marketing móvil pueden dividir el contenido de la página:
Abstraer el genérico superior como
Slider
布局组件
将不同 tab 下对应的瀑布流,抽象为
路由组件
。
Slider
和
瀑布流
就可以做到并行加载,并且当切换 tab 时,新的 tab 内容将由框架触发按需加载和渲染。
▐ 数据的并行化加载
在常规的 React 或 Rax 应用 中,数据请求一般都会在组件首次 useEffect
时发起。这种组织方式,数据依赖于业务 Bundle 的加载、解析、执行,会在页面完成首次渲染后才发起,请求的时机是非常滞后的。
在 ice.js 3 中,框架对页面数据加载的编码规范做出了约定,来最大限度的提前页面的数据加载时机。页面数据请求通过 dataLoader
声明后,会由框架(或容器)统一发起,和业务 Bundle 的加载解析是并行、不阻塞的。在手淘等 PHA 容器下,这种标准化的数据请求,还会被进一步提升为数据预请求,而无需额外的配置。
基于这种模式开发的 Web 应用,天然获得了更好的性能体验。
两种编码方式的请求时机对比如下:
▐ 云端结合的预请求
资源加载
和
数据加载
过程,可以被更彻底的并行化为下面的形式:
▐ 默认 HTML 不再空白
出于这个原因,ice.js 3 默认开启了 SSG
,会在构建时,执行页面渲染逻辑,预先构建好页面中不依赖于数据的静态部分。
SSG
,会在构建时,执行页面渲染逻辑,预先构建好页面中不依赖于数据的静态部分。
▐ 开箱即用的 SSR
SSR 作为体验优化的杀手锏,已在商品详情、用户增长、淘菜菜等业务中普遍使用和验证,可以预估在未来还会有着更广泛的应用。因此,ice.js 3 是将 SSR 作为主要的渲染模式来保障的。
ice.js 3 的 SSR 设计,延续了 Rax 中结合 Midway FaaS 的一体化模式,业务可以在一个工程中完成页面逻辑和渲染服务的维护,以 Serverless 的形式发布 SSR 应用。同时框架还内置了环境变量模拟、错误降级等常用逻辑,来尽可能降低 SSR 应用的开发成本。
▐ 页面内容的流式渲染
建设中
▐ Zero-Bundle-Size 的探索
准备开工
Zero Bundle Size
是 React 在推 Server Components
时提出的一个概念,意思是在 Server 端完成渲染的组件,就不需要再向 Client 端下发 JS Bundle 了。目前社区流行的 Islands Architecture
也可以看做是类似的方案。
这是相对于现有的 SSR 应用而言的,我们知道,SSR 应用即使在 Server 端完成了整张页面的渲染,在 Client 端依然需要下发完整的 JS Bundle,重新执行一遍,来完成 Hydrate
,从而让页面达到可交互状态。
而在 Server Components 方案中,页面被划分为两类组件:
Server Component,只在 Server 端执行的组件,用于渲染静态内容
Client Component,只在 Client 端执行的组件,用于处理有交互的内容
浏览器侧,只需要加载 Client Component
对应的 JS Bundle 即可,可以预期的是页面的资源大小将会大大减小。以 React 官方的 Server Component Demo 为例,Client 端加载的 Bundle 大小从 498k
减少到了 178k
。Client 端资源减少,带来的直接收益是,页面的可交互时间将被大大提升。
这将会是 ice.js 在下一阶段的一个主要探索方向,期待通过这种模式,能进一步的提升业务的用户体验。
Server Components
地址:https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
Islands Architecture
地址:https://www.patterns.dev/posts/islands-architecture/Server Component Demo 地址:https://github.com/reactjs/server-components-demo
小结
-
在加载策略上,优化了默认的页面资源加载策略,提供了区块和数据的并行化加载能力,同时还在探索如果结合云和端,建设更彻底的预请求方案。 -
在渲染策略上,提供了 SSG 能力以优化默认的 HTML 构建产物,在现有 SSR 能力的基础上,还将继续探索流式渲染、Server Components 等方案,进一步提升 SSR 应用的体验。
ice.js 3 地址:https://v3.ice.work/
正文结束,以下内容为重复编辑,非常抱歉。
ice.js 框架在之前的版本中,主要服务于中后台 / PC 的项目研发,而随着无线端以及多端能力的拓展,ice.js 3 将成为一套面向大淘宝技术的终端应用框架。因此在 ice.js 3 的版本中除了「开发者体验」之外,还围绕「用户体验」探索了大量技术方案。
ice.js 3 地址:https://v3.ice.work/
-
通过框架内置以及其插件化机制保证跨项目的一致性
:对于中大型团队而言,跨团队跨项目的技术方案收敛和一致性能够更好地保证协同效率 -
开箱即用的框架能力,减少重复建设
:除了基础工程能力的支持之外,框架会结合业务上的主流 SPA、微前端等应用模式,探究业务领域的实践,比如数据请求、状态管理、权限管理、KeepAlive 等 -
贴近业务实践,让复杂的技术方案更好地落地
:对于 SSR、FaaS 一体化应用等业务解决方案,ice.js 能更好地降低接入成本,同时打通与其他基础建设之间的连接
-
多端研发 :除了支持支持 PC / 无线的研发之外,还可以通过 ice.js 3 进行小程序的开发,并为多端研发提供解决方案
-
全新运行时:默认以 React 18 为基础 UI 框架,同时升级了路由系统默认以约定式方式进行配置,面向开发者提供更小的构建体积以及更加简单的运行时能力定制 -
专注性能优化:提供不同解决方案提升页面性能,包括全新的 SSR 设计、页面数据请求能力、资源预加载等 -
开发体验提升:引入 swc、esbuild 等原生前端工具链稳步提升构建性能,并且提供丰富的生态以便开始满足开发诉求
▐ 多端研发
PC 和无线统一
在这个版本,ice.js 从原先服务中后台开发的基础上,也全面支持了无线端应用的开发。
框架将内置无线端开发的实践,比如 rpx
转 vw
将作为框架默认的能力提供。而对于原 Rax 体系下的源码资产,也可以通过兼容模式,无缝在 ice.js 3 框架下运行。
对于无线搭建体系,通过 rax-compat
的兼容,我们也能使业务的 Solution
中能够无缝支持绝大部分的 Rax 模块
运行在 ice.js 3 之上。
小程序研发
ice.js 3 的小程序研发将以运行时方案为基础,让用户可以以一码多端的方式高效的进行业务研发。在引入小程序插件之后即可开启:
import { defineConfig } from '@ice/app';
import miniapp from '@ice/plugin-miniapp';
export default defineConfig({
plugins: [
miniapp(),
],
});
window
和 导航
tabBar
相关的配置,可以在
src/app.ts
中进行配置
// src/app.ts
export const miniappManifest = {
window: {
defaultTitle: 'miniapp test',
},
};
目前 ice.js 3 已支持阿里(支付宝、淘宝、钉钉等)及微信、百度、字节跳动、快手等端。
▐ 全新的运行时
框架默认以 react@18 和 react-router@6 为基础依赖,提供更加强大的运行时 API 和路由系统。
在 ice.js 3 中默认推荐以约定式的路由进行开发,框架将内置对加载和渲染上进行优化,帮助业务构建性能更好的应用,同时也为开发者提供了更加便捷的方式基于路由进行能力定制。
▐ 专注性能优化
资源加载
assets-manifest.json
来预加载当前页面依赖的资源,以获得更好的页面体验。
数据加载
通过以下方式定义的页面数据将会不在依赖主 bundle 和页面资源的加载:
import { defineDataLoader, useData } from 'ice';
export default function Home() {
// 通过 useData 消费页面级别定义的数据源
const data = useData();
return <div>{data.title}</div>;
}
export const dataLoader = defineDataLoader(
() => fetch('https://api.github.com/repos/alibaba/ice')
);
多种渲染模式
useMounted
和
<BrowserOnly />
的能力,方便应用完成差异化的渲染处理:
import { ClientOnly } from 'ice';
export function Home () {
return (
<ClientOnly fallback={<div>loading...</div>}>
{() => <span>page url is {window.location.href}</span>}
</ClientOnly>
);
};
框架结合 Midway FaaS,进一步降低业务接入 SSR 应用的研发成本,除了基础的调试开发能力之外,也将在链路方案上给予支持:
后续我们也将为社区开发者打通阿里云、Vercel 等平台的部署流程,方便开发者能够低成本享受 SSR 带来的体验提升。
▐ 稳步提升开发体验
工程体验
稳定的依赖
框架在原先的基础上进一步优化工程依赖,对相关依赖进行预编译,对比上一个版本(ice.js 2)减少 300+ 个依赖,大小减少 90M+。
关键依赖会被预打包和锁定版本,确保使用的每个小版本均是稳定可用。
配置提示
ice.config.mts
。开发者在获得完善的配置类型提示的同时,可以非常便捷地添加本地插件或者定制运行时能力。开发者不必再为配置出错以及不清楚 API 的导出而困扰。
import { defineConfig } from 'ice';
export default defineConfig(() => {
plugins: [
minify: false,
{
name: 'custom-plugins',
setup({ onGetConfig }) {
onGetConfig(() => {});
},
},
],
});
下一步
ice.js 3.0 框架依旧有很多需要突破的地方,接下来将在开发者体验和用户体验持续进行打磨:
探索
React Streaming
和Server Components
在业务下的实践,提升页面的可交互体验进一步推进终端统一的预请求模式,让页面性能再进一步
持续优化框架开发体验,以轻量方式应用原生前端工具链,给开发者带来极致的调试体验
同时我们也会进一步加强能力生态和周边的建设,如果对框架、工具、组件体系感兴趣的开发者,欢迎参与贡献。
相关链接
飞冰(ICE)站点:https://v3.ice.work/
ice.js GitHub 仓库:https://github.com/alibaba/ice
ICE PKG 组件开发站点:https://pkg.ice.work/
ICE PKG Github 仓库:https://github.com/ice-lab/icepkg
Midway:https://midwayjs.org/
swc:https://swc.rs/
esbuild: https://esbuild.github.io/
大淘宝技术跨端技术部终端框架团队致力建设简单友好的终端应用框架,希望通过研发框架和研发工具提升开发者体验,并降低研发成本。除了研发框架之外,我们还提供了 NPM 包开发解决方案 ICE PKG 以及开发调试工具。
如果对于框架体系、工程构建、组件工程和调试工具等领域有兴趣,欢迎通过 [Github Issue](https://github.com/alibaba/ice/issues) 或者[邮箱](mailto:[email protected]) 联系我们一起探讨。
本文分享自微信公众号 - 大淘宝技术(AlibabaMTT)。
如有侵权,请联系 [email protected] 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。