淘天集团-夏温武-用户体验优先的框架设计.pdf

1、户体验优先的框架设计by 夏温武个简介夏温武 前就职于淘天集团，负责开源研发框架 ice.js，在前端架构和前端程领域有定的实践经验。在集团作期间，推进统了程底座 build-scripts，也负责过微前端框架 icestark 的建设以及其规模化的应。录应框架的设计演进体验优先的案设计下步的展望框架的设计思路ReactVue构建模式构建性能脚本优化框架稳定性HMR框架运时数据请求路由状态管理渲染模式应框架设计：Next.js/Nust.js/Umi/ice.jsAngularUI Framework框架的演进围绕开发者体验，打造统的程构建具ice-scripts/build-scripts程

2、能基础之上增加运时的最佳实践输出ice.js 1.x/2.x以户体验为核，建设体验良好的开发框架ice.js 3.0开发者体验户体验户体验提升的段体验提升的困境案组合多对各种各样的性能优化案，开发者往往难以定位问题组合案开发成本传统的体验优化案开发者重参与，先开发后治理的模式难以持续链路打通难性能优化不仅仅只是存在于前端的范畴，需要更多端到端之间协作的段框架普适性的优化策略开箱即的技术案Part2体验优先的案设计框架提升户体验的策略默认分包策略动代码精简请求优先策略多种渲染模式 SSG/SSR框架内置默认优化策略低成本开启或感知默认的分包策略默认路由级别按需加载，配合 splitChunks

3、能，最限度复资源动代码精简ReactReactDOMRouterCoreRuntime PluginRequestStore框架依赖运时能AnalyzerRoute Fileimport statementApp config构建阶段动分析ReactReactDOM构建结果依赖请求优先案设计请求优先案设计将的数据请求和 UI 实现接耦，通过 dataLoader 定义数据请求优先案设计请求优先案设计Chrome 弱实验室数据并化的请求结合云和端能将数据请求和资源加载更加彻底的并并化的请求定制容器可以极限度地让资源（html/assets）、数据并基于标准容器，可以更多利标准协议 Early H

4、ints 优化并化的请求结合 Early Hints 能，让关键资源或请求能够提前发性能提升策略-SSRSSR（Server-side rendering）可以让屏可时间得到提升向 SSR 的框架设计向 SSR 的框架设计渲染模式CSRSSGSSR默认关闭默认开启默认产物培养开发者养成同构的开发习惯为缝迁移 SSR 做准备享受 SSG 带来的静态内容直出和资源加载优化的效果向 SSR 的框架设计框架通过整合设计避免开发者在源码和程上进定制修改向 SSR 的框架设计按需执 SSR 内容，让 SSR 程体验得到质的优化向 SSR 的框架设计SSR 运时和程链路上的复杂度统由框架承接向 SSR 的框

5、架设计默认 Server 执的场景下，提供运 API 让应可以顺利执：-useMounted：在 React Hydrate 完成后返回值为 true-：组件只允许 React Hydrate 完成后渲染SSR 运时设计增加 CDN 节点于处理兜底降级统接的关增加浏览的安全验证接 FaaS 简化应的部署和运维流式 SSR 实践流式 SSR 相于传统 SSR 能够进步提升表现流式 SSR 能够带来的收益等待服务端返回 HTML 内容，由服务端提供性能渲染容器和络环境，减少设备和络的副作影响屏相关内容先返回，减少接过慢对屏性能影响，同时资源随 chunk 返回，提前资源的加载时机脚本资源加载结束后

6、进 hydrate，提升的可交互时间内容区块 html 段返回，接收完成后开发 hydrate整个可交互流式 SSR 能够带来的收益 chunk 渲染段返回流式 SSR 实践useSuspenseData：-Client 端动消费以 Streaming 形式返回的数据-Server 端执动捕获内部异步请求，以Streaming 形式返回withSuspense：-声明流式返回的组件-持数据未获取时的 fallback（架屏）流式 SSR 实践Part3下步的展望下步展望UXD