Umi Max。 这是内部 Bigfish 框架的对外版本，解我们自己的问题，同时也给社区另一个集中化框架的选择，定位是中后台框架，包含了中后台相关的大量最佳实践的插件。如果有定制需求，大家可以参考他来实现内网框架的定制，比如快手团队就有基于 Umi 4 的框架定制，还有 Alita 也是基于 Umi 定制的面向移动端的框架。

$ npm i @umijs/max -D

React Router 6。 我们升级了路由方案到 React Router 6，喜忧参半。好消息是，React Router 6 是 Remix 的基础库，面向框架层做了很多优化，路由实现层更优雅，Umi 得以删除大量路由渲染的代码；坏消息是，带来不少 Break Change，比如之前父路由渲染子路由用 children，得换成 。

- { props.children }
+ <Outlet />

支持 Vue。 Umi 4 中提供了 Vue 支持，记得我在 Umi 2 时画过一张架构图，其中就有 Vue 的一环，Umi 3 时也有过尝试，但那会 Vue 3 还不太成熟，接入时遇到不少坑，这个坑今天总算是补上了。此功能由社区同学操刀，只需装载一个 preset 即可切换到 Vue。

export default {
  presets: ['@umijs/preset-vue'],
};

默认最快的 CSR 请求。 项目构建快解的是 DX 问题，但同时也应该关注 UX。Client Loader 的目的是让应用加载默认快，避免 React 项目经典的 Render-Then-Fetch 的加载瀑布流问题。效果见下图，示例项目的从 9s 降到 6s，这 6s 还是之前截的图，上了 Preload 功能之后其实已更快。

export default function() {
  // 使用请求数据
  useClientLoaderData()
}
// 声明请求
export function clientLoader() {}

白盒文档的 Lint。 Umi 4 里内置了我们精挑细选的 lint 规则，只有质量类不开可能会导致项目问题的规则，不包含风格类的规则，不包含 TypeScript 中 type-aware 类的规则，这类规则需要跑整个项目，会导致性能问题；同时，我们通过 @rushstack/eslint-pach 的方式锁定了 config 里找 plugin 的规则，确保规则是长期稳定的。

SSR。 Umi 4 重写了 SSR 功能，目前此功能还在 beta 阶段，请勿将其用于生产环境。Umi 4 的 SSR 有以下特点，1）server 代码的构建基于 esbuild，所以极快，2）请求的处理类似 next.js 的 getServerSideProps 和 remix 的 loader，只在服务端跑，3）基于 react 18 的 suspense 和 renderToPipeableStream。实现原因，部署层目前仅实现了 vercel 的 adapter。这里有个简单的 Todos 示例：test-vercel-chencheng.vercel.app/

export default {
  ssr: { platform: 'vercel' }
}

API 路由。 Umi 4 约定 src/api 目录下存放的 Serverless Function 格式的文件即为 API 路由。这部分路由会打包成不同平台支持的 Serverless Function 产物。场景比如带 token 的 API 调用、动态数据源、基于 Notion API 的 Blog、Hackernews Clone 等等。基于此，Umi 能做的事的边界就大了很多。不再只是写写中后台，实现静态页面。

export default {
  apiRoute: {},
}

微生成器。 此概念来自 Modern.js。Modern.js 引入很多新概念，其中「微生成器」还是非常贴切的。他包含两个功能，1）小型脚手架，2）功能的开启与关闭。Umi 3 虽然也有 generate 命令，但只包含功能 1。Umi 4 拓展了下 generate（alias 为 g）命令。除了支持更多类型的小型脚手架生成，还支持功能的开启与关闭，以及比如 Monorepo、react 和 antd 版本等的功能切换。

$ npx umi g
? Pick generator type › - Use arrow-keys. Return to submit.
❯   创建页面 -- Create a umi page by page name
    创建组件 -- .
    创建 mock 代码 -- .
    创建 model 代码 -- .
    启用 Prettier -- Setup Prettier Configurations
    启用 Jest -- Setup Jest Configuration
    启用 E2E 测试 -- .
    启用 Tailwind CSS -- Setup Tailwind CSS configuration
    启用 SSR -- .
    启用 Low Import 研发模式 -- .
    启用权限方案 -- .
    启用 Monaco 编辑器 -- .
    关闭 Dva 数据流 -- Configuration, Dependencies, and Model Files for Dva
    关闭 MFSU -- .
    切换为 Monorepo 项目 -- .
    切换 React 为 18 -- .
    切换 Antd 为 5 -- .

除此之外，我们还有非常多小而美的 DX 改进。

自动 https。 Umi 4 的 https dev server 的实现基于 mkcert，启动过程中会基于 hosts 自动生成对应的 key 和 cert。开发者除了安装前置的 mkcert，其他无需关心。