发布 Umi 1.0

我为大家介绍一个新的 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 Shaking
  • 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_HELPER，回复 umi 自动加群。

最后

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

2018年2月26日

In 未分类