Hello，Umi

什么是umi

它是由dva的开发者云谦编写的一个新的React开发框架。它既是一个框架也是一个工具。简单的理解可以称它为一个类 next.js 的专注性能的前端框架。通过约定、自动生成和解析代码等方式来辅助开发，减少开发者要写的代码量。

umi是通用方案，几乎适用于现在所有的web环境。

umi的优势

umi是一个类next.js的专注性能的前端框架，它的优势是：

内置的大量性能优化
多端，无缝支持容器和浏览器访问
类 webpack 的插件机制
针对 antd 和 dva 有友好的支持

我觉得umi最大的特点就是文件即路由了，即在pages下面新建文件，就会自动产生配套的路由，对于其他前端框架，路由配置一直是一个很麻烦的事情，而且，对于多人协作开发的情况下，公共的配置文件，将面临着更多的文件冲突的可能。

由于每个页面都是在一个单独的目录下，并且对于单个页面来说，不需要任何多余的配置，所以你甚至可以直接把整个页面交给一个零基础的实习生。(我就是这么干的)

umi的可扩展性

作者称“umi有着类webpack般灵活的插件机制，他就是一个架子”。主要的umi项目，甚至不到700行代码（629行），把骨架搭好，把框架的生命周期钩子暴露出来，然后通过插件让功能丰富起来（包括现有的内部逻辑也是这么实现的）。

我却更喜欢把它形容为一个高达玩具，对于刚入手的玩家，可以根据说明书，一步一步的组装出自己心爱的玩具。而对于高玩来说，官方提供了一个骨架，保证了高达的可动性，然后你自己可以随意的DIY，任意的使用材料和设计方式。

对于umi也是相同，对于刚接触前端的朋友，你可以很好的完成公司的业务需求。对于对前端有一定了解的朋友，你可以随意的修改，包括配置、编译、开发、模板、请求方式、数据流等等，几乎所有你能想到的前端工程化的内容，都允许你自定义。并且在一步步接触这些可配置项的时候，你也对前端工程化有了一步步的认识和理解。(我说UMI你能玩一辈子，你行不行？)

umi的性能

对于项目性能方面，UMI也做了很多的优化，包括尺寸，执行效率，首屏加载时间，用户体验等等方面，但这些对于开发者其实是无感知的，可以说有时候你就升级了一下插件版本，你的整个项目就优化了，你根本不需要进行任何的多余操作。作者称“你只管写业务代码，我会负责性能，并且随着umi的迭代，我保证你的应用会越来越快”。

简单的说，umi做到了开箱即用，对于开发者和前端初学者是非常友好的。

why umi

不知道你在开发中有没有遇到这些问题：

我希望我的项目既可以跑在支付宝（淘宝）容器里（多页），又可以跑在普通浏览器里（单页），有啥办法吗？
随着项目越来越大，开发调试的启动和热更新时间越来越长。。
我所有的文件都打包在一起发布了，用户反馈说网站打开很慢，有没有办法基于路由做按需加载？
连 iOS 都支持 PWA 了，我能否一键开启让我的项目更快？
据说 preact 又小又快，我如何一键开启？
开发完之后部署又遇到问题，publicPath 和 basename 是啥？又如何解决？
我要部署到静态服务器或 cdn 上，能否帮我把 HTML 也生成出来，部署后就能跑？
antd{,-mobile} 还要配 babel-plugin-import？那个 es 文件夹又是啥？
ts、jest、babel 的配置好麻烦，而且配了这个又和另一个冲突，怎么办？
据说 webpack 的 tree-shake、scope-hoist、side effect 等能进一步减少文件大小，我如何最大化地利用？
dva 的 model 一个个手写载入好麻烦，还有 dva@2 之后 history 的 query 怎么没有了？

以上的问题，来自umi作者平时开发中收录的。如果你遇到了同样或者类似的疑问和烦恼，不妨试试UMI吧。