发布 umi 1.0 🎉🎉🎉

[sorrycc]

我为大家介绍一个新的 React 开发框架，umi，大家可以叫他五米。经过近半年的细致打磨，37 个 beta 版，23 个 rc 版，以及内外部项目的检验之后，今天终于迎来了他的 1.0 版本。非常感谢期间把 umi 应用到项目、提 issue 和 PR 的同学们，没有大家的支持 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 是什么？

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

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

他基于以下约定：

• 页面是 React 组件
• 在 pages 目录下新增文件即可创建页面

现在写一个 React 应用你需要掌握很多知识，比如基于路由的 code-splitting、service-worker、webpack 配置、babel 配置、aslant 配置、性能优化、HMR、redbox、jest 测试、ts 配置、tree-shaking、scope-hoist、side-effect 等等。umi 把这些枯燥的事情全都做了，而你只需负责创造性的那部分。

性能

umi 在性能上做了很多努力，这些对于开发者是无感知的。“你只管写业务代码，我会负责性能”，并且随着 umi 的迭代，我保证你的应用会越来越快。

主要有：

• PWA Support
• Tree Shake
• antd(-mobile) 启用 ES Module
• Scope Hoist
• 公共文件的智能提取
• 页面级的按需加载
• Inline Critical CSS
• 提供 umi/dynamic 和 import() 语法，分别用于懒加载组件和模块
• 优化的 babel-preset-umi
• 静态化的 SSR 处理
• link rel=preload
• hash 构建及服务端支持（云凤蝶）
• 通过 react-constant-elements 和 react-inline-elements 提升 rerender 性能
• 一键切换到 preact
• Progressive image loading
• 按需打包 umi 内置的路由代码
• ...

优化点很多，有些关乎尺寸，有些关乎执行效率，有些关乎首屏时间，有些关乎用户体验，细聊的话，能说上几个小时。大家根据关键字应该能猜个大概，这里就不展开了。

插件机制

webpack 的生态好，和他灵活的插件机制有很大关系。umi 也类似，他就是个架子，把坑挖好，然后通过插件让功能丰富起来，内部逻辑也是如此，由一个个插件组成。

插件能做什么？基本什么都能做，整个生命周期都能修改，包括配置、build、dev、html 和 临时文件的生成等，已全部挖好坑。

详见 umijs/umi#87。

antd{,-mobile}

为了更方便地使用 antd{,-mobile}，umi 对他们是直接内置的。所以 antd 和 antd-mobile 的组件可以直接用，然后 umi 会帮你做按需（基于 babel-plugin-import，使用 es 文件夹，开启 tree-shaking）编译。

当然，你也可以使用任意的其他组件库。

详见《使用 antd 或 antd-mobile》。

dva

dva 是包含路由的，所以和 umi 结合主要是把路由的部分交给 umi 来处理，让 dva 回归一个单纯的数据流方案。我们通过插件 umi-plugin-dva 的方式实现，同样开箱即用：

• 内置 dva，所以有一个 umi-plugin-dva 依赖就可以了
• 内置 dva-loading
• 自动注册 models 目录下的文件为 model
• history 的 query 回来了，不需要再手动用 query-string 进行处理
• ...

具体在 《umi + dva，完成用户管理的 CURD 应用》 有详细介绍。

上手使用

感兴趣了吗？下面我们为大家准备了一些项目上手的选择：

• 可以跟着官网的《快速上手》文档一步步熟悉 umi
• 如果开发 dva 应用，请安装 dva-cli@next，并参考 《umi + dva，完成用户管理的 CURD 应用》
• 如果要迁移 dva 项目到 umi + dva，可以参考 dva-hackernews!13，代码量 +187，-327 足以说明 umi 带来了什么
• Demo: 高仿版 ele.me

社区

钉钉群

微信群

扫码加 UMI_HELPER，回复 umi 自动加群。

最后

umi 才刚刚起步，很希望你能一起来完善他，我们 Github 见！👋

[memoryza]

_> 喜闻乐见

[Wangggym]

happy hacking!

[WuJiY]

_> 喜闻乐见

[BingSee]

Nice

[liuxiaojiu]

学习大佬造轮子

[MinJieLiu]

前排

[shaozj]

赞！

[jin5354]

封装啊封装，抽象啊抽象，轮子滚啊滚，看不到头……

[Boomer2016]

先mark，站个前排，等dva完全掌握了再来~

[Gavinchen92]

所以roadhog还更新吗

[TopGrd]

前排mark。👍

[fancymo]

性能list，学习了