204 - 《渝 FE 2022 分享主题文字稿》

先写了文字稿，PPT 还没画，11.5 之前先不要外传哈。由于疫情原因，分享会改成线下了，周末要完成视频录制。

介绍

大家好，我是来自蚂蚁集团的云谦。很高兴能有这个机会来和大家来分享，我今天的分享主题是「前端框架的趋势与实践」，是我这段时间对前端框架领域的理解，分趋势和实践两个维度。趋势比较主观，可能和你的理解不同；实践主要基于 Umi 框架在蚂蚁的应用得出。

关于我。BALABALA。。。

关于前端框架的趋势，其实有很多可以讲的点。比如框架设计、构建、bundless、Native 语言、Islands 架构、数据流、请求方案、工程化、Headless 组件、文档方案、Monorepo、Node Runtime、React 18 等，在这段时间都发生了很多变化。但 30 分钟时间有限，我会挑 5 个点来分享我的看法，每个点 5-6 分钟。

框架设计

元框架（Meta Framework）领域近一年出现了不少新成员，比如 Remix、Svelte Kit、Solid Start、Qwik City、Fresh、Astro 等。同时不少老牌框架也做了迭代，比如 Next.js 13、Nuxt 3、Umi 4、ICE 3、Storybook 7 等。

我观察到的趋势是，

1、功能趋同
2、新框架大部分基于 Vite
3、基于路由的声明式数据获取方案

趋同指的是功能。不同的元框架 80% 的功能是类似的，剩下 20% 是有差异有亮点的。那 80% 趋同的功能，比如大家通常都有约定式路由、api 路由、ssr+ssg+isr、通过编译时的临时文件扩展框架能力、插件和扩展机制。剩下 20% 就是不同框架的卖点了，举一些例子，比如 Remix 的卖点是 loader + action 的数据加载机制、Fresh 的卖点是 0JS + deno + 真 bundless。

新出的 80% 框架都基于 Vite，上面列出的应该就只有 Fresh 是直接用 esbuild 打包。老框架升级除了 Next.js，大家都有提供 Vite 模式的支持，有些默认，有些提供配置项切换到 Vite 构建模式。选择 Vite 而非 webpack 看起来是这个阶段更合适的选择，为什么大家会选择 Vite 呢？我觉得，1）除了 Vite 的速度之外，2）易集成和 3）生态也是大家考虑的因素。（注：但是，写完这段后发现 Vercel 发布了 Turbopack，可能过个半年又要有变化了）

尽管有 useEffect、swr、react-query 等社区和官方的请求方案，以及 react 官方计划提供的 use，但大部分元框架都提供了框架层的数据获取方案，并且大部分是基于路由的声明式的。原因是，当追求极致的请求速度时，只有运行时库并不够用，只有和框架结合，尤其是路由和编译态的结合，才能达到最快最完美的请求状态：「尽快发起、并行执行」。比如，Remix 是 export loader 方法，Umi 是 export clientLoader 方法，Qwik City 是 export onGet 方法，Fresh 是 export 包含 GET 方法的 hander 对象，Solid Start 是 export routeData 方法。

再看 Umi 在这块的实践。

1、不能免俗，由于呼声比较大，Umi 也提供了 Vite 模式。但并没有在蚂蚁内推广，蚂蚁内还是用的 webpack + 我们自研的 MFSU 提速方案，够用。Umi 的 Vite 模式在快手公司的项目里倒是有大量应用。

2、Umi 提供了 clientLoader 请求方案，实现的时候有参考 Remix 的实现。Remix 基于 loader 达到 SSR 模式下的最快请求，但不支持 CSR，Umi 的 clientLoader 方案可实现 CSR 模式下的最快请求。

构建和 Bundless

构建一直是前端开发者关注的焦点。项目越来越大，依赖越来越大，构建越来很慢。

我观察到的趋势是，

1、情理之中的 Turbopack
2、Vite 大热
3、Webpack 依旧是生产构建的主力
4、真 Bundless 只存于企业内

Turbopack 是临时加的。前几天 Next.js 13 发布时出的消息，出自 webpack 作者之手，是基于 Rust 重写的类 webpack 方案，计划实现 80% 的 webpack 功能。时间原因，具体不展开了，前几天我有在公众号里写过一篇介绍。为啥说是情理之中？因为 webpack 已经 4 个月没更新了，webpack 作者一直在提私有库的 commit。前几天还在和同事闲聊，要么是被 Vite 逼躺平了，要么就是在憋大招。果然！目前还非常 alpha，可以等个半年再来看进展。

Vite 大热有多方因素，其一是因为有大量新兴框架采用，这在上一章节「框架设计」里有过介绍。另外，也可以从 npm 下载量看出，vite 周下载有 200W，已经快接近 webpack 的 1/10 了。这不是反话！

Webpack 依旧是生产构建的主力。尽管 Vite 大热，但据观察，包括使用 Umi 的 Vite 模式的用户来看，很多人用 Vite 的同学会把 Vite 只用于 dev，build 阶段依旧是用 Webpack。可能有几方面的考虑，1）Vite 的 build 也是 bundle，并不能少做什么，所以速度并没有优势，2）上生产时通常比较谨慎，大家觉得 Webpack 的 build 更可靠，3）Webpack 支持文件系统的持久缓存，合理利用对于 build 速度来说简直是神器。

真 bundless 只存于企业内。什么是真 bundless？就是比如我们要依赖 antd，只要 import 即可，无需在本地的任何时机做打包这件事。为啥 vite 不是？因为 vite 会在 optmize 阶段用 esbuild 打包依赖