Umi 4 RC 发布

大家好，我是若川。感谢大家一年以来的支持和陪伴。这一年疫情反复，年底应该有由于疫情不能回家的小伙伴。在这里先祝福大家，新年快乐。

本打算今天不发文，但看到这篇觉得不错，就发一下。

大家好，Umi 4 经过几个月的开发，终于要和大家见面了。相比 Umi 2 到 3，3 到 4 的变化是巨大的，开发时间也更长，但我们尽量把对于开发者的影响降低到最小。按捺住激动的心情，在此先和大家分享下都有哪些变化。

🎉 新官网和文档

🚀 MFSU V3 & 默认开启

🎭 双构建引擎和 ESMi

🕸 Webpack 5

⛹🏾‍♂️ React Router 6 & 新路由

🐹 最佳实践迭代

🛡️ 依赖预打包

🤺 Umi Pro

🐛 Low Import 研发模式

⚠️ 强约束功能集成

🎈 Import All From Umi 迭代

🍀 srcTranspiler 和 depTranspiler

🌼 jsMinifier 和 cssMinifier

🌸 应用元数据

❄️ 微生成器

🧪 贴心小改进

新官网和文档。下图是新官网的首页，包括重新梳理的文档、信息结构、以及新写的文档插件。目前包含基础的配置、API、升级和快速上手等基础文档，剩余文档还在紧张编写中。有个变化是之前插件的文档集成到 Umi 官网中，成为 Umi Pro 的一部分，之后无需跳转。

MFSU V3 & 默认开启。MFSU 更新了他的第三个大版本，如果你有用 Umi 3 内置的 MFSU 并遇到问题，建议重新尝试，这个版本有很多改进，解决基本所有之前可能会遇到的诡异问题，并且编译速度和页面打开速度都更快。昨天我还有写一篇《比 Vite 更快的 MFSU》。基于此，我们自信地把这个功能在 Umi 4 中默认开启。还有值得一提的是，MFSU 可脱离 Umi 运行。

双构建引擎和 ESMi。Umi 4 提供 Vite 和 Webpack 两种构建模式供开发者选择，并尽可能保证他们之间功能的一致性，可能有些同学会喜欢 dev 用 vite，build 用 webpack 这样的组合。同时基于 Vite 模式实现了 ESMi 的 Client 端，ESMi 依赖服务端，在外网还无法使用。

Webpack 5。Umi 4 默认使用 webpack 5 并开启物理缓存。

React Router 6 & 新路由。Umi 4 的路由基于 React Router 6 实现，个人非常喜欢这个版本，因为 Remix 的原因，React Router 6 从设计上考虑了配置式路由的场景，让我得以删除大量 Umi 3 中关于路由渲染的代码。同时基于此，设计了新的路由结构，方便扩展和在未来处理路由的约定式请求。

最佳实践迭代。针对之前 umijs/plugins 仓库中的插件进行了重写、升级，并整合到主仓库。这么做是为了更好的顶层设计，让官方插件之间的风格更一致。

依赖预打包。由于服务企业内部，安全和稳定是其中很重要点，加上最近 colors 和 faker.js 闹得社区沸沸扬扬，谁都不希望睡一觉醒来，自己负责的业务挂了，还背个故障。Umi 4 接着 Umi 3 继续做依赖预打包的事，并且更彻底，不仅是 node 侧的依赖，部分运行时的依赖也会做锁定，比如 core-js 和 @babel/runtime。

Umi Pro。Umi Pro 是内部 Bigfish 框架的对外版本，解我们自己的问题，同时也给社区另一个集中化框架的选择。

Low Import 研发模式。这是 Umi 4 的试验性功能之一，目前已开发完成，解的问题是让开发者少些或不写 import 语句。项目中大量的 import 其实都可以通过工程化的方式自动处理。Umi 4 里通过 lowImport: {} 开启，然后就可以无 import 直接用路由相关的 Link、useLocation 等，数据流相关的 connect、useModel，antd 组件 Button、Calendar 等，以及其他更多。

强约束功能集成。Umi 4 提供 API 让强约束和代码校验变得非常容易。API 包括 api.onCheck、api.onCheckConfig、api.onCheckPkgJSON 和 api.onCheckCode，顾名思义，非常好理解他们分别是干嘛的，可以分别对依赖类、代码类和配置类的内容做校验和卡点，适用于团队。

Import All From Umi 迭代。这是两年前 Umi 3 加的功能，最近发现 Remix、prisma、vitekit 等框架和工具都有类似实现。这种方式有好有坏。好处是通过 umi 将大量依赖管理起来，用户无需手动安装。坏处是更黑盒，同时有点 Hack。Umi 4 不能解其黑盒问题，但解了 Hack 问题，让实现无副作用，可以和 Vite、MFSU 等方案无缝结合。

srcTranspiler 和 depTranspiler。提供针对源码编译和依赖编译更多选择。源码编译可选 babel、swc 和 esbuild，目前没有银弹，合适场景做合适的选择。比如 swc 由于不支持 top level await，和 mfsu 会有些冲突，但他适用于 build，因为有补丁可以兼容到 es7；比如 esbuild 适用于 dev，因为快。数据方面以 ant-design-pro 项目为例，源码编译用 esbuild 相比 babel 在 M1 2020 无缓存情况下会快 3s。

jsMinifier 和 cssMinifier。js 压缩和 css 压缩 Umi 4 默认都用的 esbuild，因为快。同时也提供更多选择，js 压缩还支持 swc、terser 和 uglifyJs，css 压缩还支持 cssnano。

应用元数据。Umi 4 有通过 api.appData 收集各种项目数据，从配置、路由、package.json、tsconfig.json、npmClient 到数据流、国际化、antd 用了哪个版本、react 和 react-dom 的版本等，应有尽有，这对于插件开发者会非常实用，也适用于有统计需求的场景。

微生成器。没错，就是 modern.js 的微生成器，这功能从 modern.js 里学习了不少，名字就不改了。举个例子，比如 prettier 功能，可能不是每个项目都需要，就比较适用于微生成器，按需启用、添加配置、安装依赖。

贴心小改进。还有不少贴心小改进，举两个例子。1 是项目中新增 plugin.ts，会默认作为插件添加，方便项目进行一些插件级的扩展；2 是调试问题时通常需要修改编译后的代码看看有没有改对，你把 umi.js 下下来存到项目根目录，umi 会优先使用这份代码。

以上是 Umi 4 目前的新功能。

除此之外，还有一些计划在正式版发布之前做的事情。包括 api route、umi server and adapter、route loader、稳定的 lint、更多命令、组件研发 father 4、文档工具 dumi 2 等，会在之后的 RC 版本中与大家见面。

最后，欢迎大家尝鲜 Umi 4，官方文档有准备 ant-design-pro 从 Umi 3 到 4 的升级文档。

················· 若川简介 ·················

你好，我是若川，毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇，在知乎、掘金收获超百万阅读。
从2014年起，每年都会写一篇年度总结，已经写了7篇，点击查看年度总结。
同时，最近组织了源码共读活动，帮助3000+前端人学会看源码。公众号愿景：帮助5年内前端人走向前列。