506 - 《TNF，我理解的下一代框架》

TNF 陆陆续续写了快两个月，和大家正式介绍下他。

1、TNF 的由来。

TNF 全称 The Next Framework，是我理解的下一代前端框架。Github 地址是 https://github.com/umijs/tnf 。

Umi 从 3 到 4，路由是个很大的痛。当时没啥选择，由于 React Router 的新功能用了 React Router 的新版本，但 React Router 新版本存在不少 break change（比如 history 和 search query 等），导致大家在升级时需要在这部分投入大量的时间。我们也投入了大量时间写这部分的 code mode 脚本来辅助项目升级。

这之后，就一直想把路由换了，要么手写，要么社区有更合适的方案。手写成本太高，一直没投入。直到 10 月底看到 @tanstack/router，觉得就是他了。

当时记录的优点如下。

1）性能，preload、load、load 和 component 代码分离、内置 mini 版 react query 所以有路由级的 stale while revalidate
2）TypeScript Safe
3）扩展能力极好，可编程式扩展，所以对框架开发者友好
4）除了 router，与 router 相关的 ssr（流和非流）、loader 等方案的 runtime 层也都有
5）有配套的工程化方案，比如针对约定式路由的 generator、runtime devtool、tsr 命令行等
6）功能相比 react-router 强大很多，场景考虑很全
7）search 是第一公民，无需自己手动 new UrlSearchParams

这个路由方案是催生我写 tnf 的一大原因。

2、TNF 是什么。

Umi 大而全，我希望 TNF 是小而美的。保持内核的精简，然后把每个功能都做到极致。

开始做 TNF 时脑暴了 24 个关键词，最终做到现在感觉可以成为卖点或者说和已有框架不同的有这些。

• 性能优先（产品体验 UX）
• AI 友好（以及 Chat 功能）
• 插件体系、组装式和生态友好（兼容 unplugin 和 Vite）
• CSR 是一等公民（考虑国内的现状，CSR 本应很简单）
• 安全（TypeScript 类型安全、路由类型安全、可独立运行的 Doctor 和规则）

其他我有记但感觉略显薄弱的还有这些。

• 迭代后更强大的路由（依赖 @tanstack/router）
• 速度（不仅构建，前序操作也会用 Rust 处理重 CPU 的任务）
• 最佳实践迭代（国际化、测试、Mock、数据流、微前端等）
• 跨端（？）

TNF 目前提供的命令包括基础的 dev、build、preview，增量生成文件的 generate，预生成临时目录的 sync（类似之前的 umi setup），还有操作配置的 config，以及可独立运行的 doctor 。构建器目前是 mako only；功能层 ant design pro 需要的都有，mock、proxy、国际化、微前端等，我们有用 tnf 的方式重新组织了 ant design pro，功能完整但体验更好一些。

3、产品性能。

如在《前端，本应更快》 中描述的，产品性能好无非四个点，产物尺寸、下载尺寸、请求策略和渲染性能。

产物尺寸和下载尺寸略，参考 《前端，本应更快》 。

请求策略 TNF 依赖 @tanstack/router 有完整功能的基于路由的 preload 和 stale-while-revalidate，这是 CSR 场景下目前社区最好的方案。如果按照推荐的方式写数据请求，CSR 下可以做到 assets（js & css）和请求在初始化载入和切换时的并发最大化和无瀑布流。

以下是 tnf with ant-design-pro 的效果图，别点太快的话，基本就告别 loading 状态了。

基于路由做请求策略的方案很重要。之前有同学问，Umi 增强后的 prefetch + client loader + 手写 swr 或 @tanstack/query 是否也能达到类似效果？答案是不能，只能做到 60% - 70%。差在哪里？「没有基于路由的 stale-while-revalidate」。勉强实现的方式是正常用 swr 或 @tanstack/query 的 hook，然后在 loader 里做 prefetch，这里会存在大量的硬编码和耦合，维护成本会变高。

渲染性能主要是减少不必要的 re-render，TNF 做了这些。

1）接入 react scan 检测不必要的 re-render
2）接入 react compiler 减少不必要的 re-render（compiler 只有 babel 版本，通过自定义 loader 接的 mako）
3）国际化方案用了性能更友好的 react-i18next，相比现在的 react-intl，性能相关的优点是前者支持国际化文件的按需加载

4、AI。

大家都可以产出 react + antd 的代码，但是如何产出地质量高、可维护性好、CLEAN、采用率高呢？

TNF 作为一个前端框架，应如何做好和 AI 的结合？

我理解 ai 应用就是 model + prompt + tools。合适的模型，搭配合适 prompt，在加上满足各种定制化需求的 function tools，就是现在大多 ai 服务的公式。

AI 应用于前端也不例外。model 对外可以选最先进的 Claude 3.5 Sonnet、O1 或新出的 DeepSeek V3，对内的敏感项目可选内部的模型或者通义千问。prompt 包