什么是Umi
Umi，中文发音为「乌米」，是一个用于开发可扩展的企业级前端应用框架的开源项目(MIT)。它是云谦编写的一个和 next.js、remix、ice、modern.js 等同类型的元框架。它既是一个框架也是一个工具。简单的理解可以称它为一个类 next.js 的专注性能的前端框架。通过约定、自动生成和解析代码等方式来辅助开发，减少开发者要写的代码量。
Umi是通用方案，几乎适用于现在所有的 web 环境。
Umi 的优势
Umi是一个以路由为基础，同时支持配置式路由和约定式路由，配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求的前端框架，它的优势是：
- 文件即路由，约定式的项目文件结构，自动将 pages 目录下的文件映射成路由配置。（并支持动态路由）
- 自动代码拆分，提升页面加载速度
- 内置 Less 支持。
- 内置的大量性能优化
- 多端，无缝支持容器和浏览器访问
- 类 webpack 的插件机制，可拔插的插件设计，你可以完全的自定义你自己的 Umi 框架
- 针对 antd 和 dva 有友好的支持
我个人最喜欢的是 Umi 的文件即路由特性了，即在pages下面新建文件，就会自动产生配套的路由，对于我之前使用的其他前端框架，路由配置一直是一个很麻烦的事情，而且，对于多人协作开发的情况下，公共的配置文件，将面临着更多的文件冲突的可能。
由于每个页面都是在一个单独的目录下，并且对于单个页面来说，不需要任何多余的配置，所以你甚至可以直接把整个页面交给一个零基础的实习生。
Umi的可扩展性
作者称“Umi有着类webpack般灵活的插件机制，他就是一个架子”。 Umi 把骨架搭好，把框架的生命周期钩子暴露出来，然后通过插件让功能丰富起来（包括现有的内部逻辑也是这么实现的）。
我却更喜欢把它形容为一个高达玩具，对于刚入手的玩家，可以根据说明书，一步一步的组装出自己心爱的玩具。而对于高玩来说，官方提供了一个骨架，保证了高达的可动性，然后你自己可以随意的DIY，任意的使用材料和设计方式。
对于 Umi 也是相同，对于刚接触前端的朋友，你可以很好的完成公司的业务需求。对于对前端有一定了解的朋友，你可以随意的修改，包括配置、编译、开发、模板、请求方式、数据流等等，几乎所有你能想到的前端工程化的内容，都允许你自定义。并且在一步步接触这些可配置项的时候，你也对前端工程化有了一步步的认识和理解。
Umi的性能
对于项目性能方面，Umi也做了很多的优化，包括尺寸，执行效率，首屏加载时间，用户体验等等方面，但这些对于开发者其实是无感知的，可以说有时候你就升级了一下插件版本，你的整个项目就优化了，你根本不需要进行任何的多余操作。作者称“你只管写业务代码，我会负责性能，并且随着 Umi 的迭代，我保证你的应用会越来越快”。
简单的说，Umi做到了开箱即用，对于开发者和前端初学者是非常友好的。
Umi 4 的特点
1、体系化有体感的默认快
Umi 默认快很多一部分是它基于 webpack 5 Module Federation 特性的构建的提速方案 MFSU。完成了既有 webpack 的功能和生态，又有 Vite 的速度的开发体验，实现了启动快、热更快、页面打开也快的效果。
同时尽可能的用上缓存提速，避免了同样的事情做多次的窘境，比如使用了 webpack 5 的物理缓存，又用上了 babel 缓存，MFSU 中还试用了预编译缓存等；同时在构建环节还用上了 rust 和 go 语言编写的构建工具 swc 和 esbuild。通过这种比 js 更加贴近于原生的语言，在压缩和编译环节提速效果显著。
2、依赖预打包让你的项目安全又稳定
「中间商锁依赖，定期更新，并对此负责」
依赖预打包前，Umi 通过 dependency 依赖 webpack、babel 和其他的一些第三方依赖，比如 colors 和 faker.js 等（如果不知道这两个库发生了什么事故的小伙伴，可以百度一下）。这时如果其中一个依赖出现异常，就会最终导致用户项目出现异常，这在 npm 包管理体系中是一个很普遍的问题。
依赖预打包之后， Umi 通过使用框架中第三方依赖的构建产物，引用的是框架内的相对路径，因此底层包发生事故，就不会再影响到整个生态体系。又由 Umi 作为依赖包的中间商，定期更新底层依赖，可以再次锁定到最新可用的依赖版本，这就同时满足了，“锁包”和“升级”的矛盾需求。
3、双构建引擎给用户更多选择
同时支持 webpack 和 vite，用户可以通过简单的配置在不同模式之间切换，并且 Umi 尽可能保证功能的一致性。你可以在开发的时候用 vite 构建，体会现代框架的编译体验，然后在上生产构建的时候用 webpack 的生态，保证项目的兼容和稳定。
题外话： Umi 的 webpack 方案 MFSU，比 vite 还快，可以看官网说明。比 Vite 还快的 MFSU
4、技术栈最新把底层依赖升到最新，尤其是 react router 6
使用 react router 6 来实现状态保持（keepalive），只需要不到 50 行的代码，这是我使用时最大的感受。
5、微生成器。
就是类似 modern.js 的微生成器，这功能从 modern.js 里学习了不少。举个例子，像页面模版、默认配置还有比如 prettier 功能，可能不是每个项目都需要，就比较适用于微生成器，按需启用、添加配置、安装依赖。这个在我们后续的课程中会用到不少，因为他确实能够最大程度的减少开发中的重复性工作，我们也会在教程中学会如何编写自己的微生成器，来满足项目的特定模版需求。
6、强约束功能集成。
Umi 4 提供 API 让强约束和代码校验变得非常容易。API 包括 api.onCheck、api.onCheckConfig、api.onCheckPkgJSON 和 api.onCheckCode，顾名思义，非常好理解他们分别是干嘛的，可以分别对依赖类、代码类和配置类的内容做校验和卡点，适用于团队。教程中我们用到这个 API 来做强约束的可能性不大，因为默认提供的约束方案，对于正常团队已经够用了。
看完上面的介绍，不知道你对 Umi 是不是更感兴趣了呢？那么请在未来的一个月左右的时间内，紧跟此专栏的更新吧。
要继续跟进后面的内容，你的电脑需要有现代前端开发需要的环境，安装了 node 和 git 并且有一个 IDE ，我推荐使用 VS Code。如果你是一个完全的前端新人，那你可以参照我的前一个专栏中的 day2 环境准备和技能要求 进行环境搭建。
感谢阅读，同时也感谢你喜欢这个专栏。
