umi-企业级前端应用框架

正⽂简介

可以先通过官⽹的例⼦来⼤致看⼀下⽤法

也可以通过提供的脚⼿架甚⾄从 create-react-app(cra) 进⾏迁移.那么与 cra 这类⽐较集成式的脚⼿架相⽐,umi有什么优势呢?

umi的优势

如果让我来介绍的话,吸引我的点就是:

可以从外部以插件的形式,定制化修改webpack配置可⾃定义的打包速度,包括了是否编译node_modules

虽然官⽅提供了很多的插件,但相⽐其他脚⼿架来说,可以卸载掉所有插件,甚⾄通过插件的形式可以打RN的包

完善的⽂档以及命令⾏⼯具还有环境变量,特别是插件⽂档,因为有⾜够的例⼦,可以做到循序渐进;之后如果涉及到微前端,组件打包都是很好的参考还有⼀整套的解决⽅案,包括组件开发以及微前端

相⽐较完全⾃定义打包配置⽽⾔,umi确实都可以做到,⽽且还有插件规范,⽅便复⽤,这⼀点尤为重要不仅仅是项⽬脚⼿架,也提供了组件脚⼿架,之前的就是⽤打包的当然也会有不⾜:

内置react-router,以及强制的routers配置,当使⽤其他的路由⽅案或者⾃定义路由时⽐较⿇烦.

配置相较其他脚⼿架来说相对复杂,且因为很多参数⽆法直观的展⽰,所以需要实验之后才能了解⽤法,建议多看官⽅的 issues

与 Roadhog 区别

Roadhog 是⼀个包含 dev、build 和 test 的命令⾏⼯具，他基于 react-dev-utils，和 create-react-app 的体验保持⼀致。你可以想象他为可配置版的 create-react-app。

相⽐较来说,这更像 ,所以与 umi 不是⼀个维度的⽅案

与 next.js 区别

这点官⽹上也有对⽐,⽽在我看来,最重要的也不是路由配置或者提供了dva(我也不怎么⽤dva),⽽是在两者相⽐功能类似的情况下,是否可扩展,且是否能够更多的避免配置⼀些常⽤类库对于研发效率来说才是最重要的,需要⼀个⽐较不错的落地⽅案,⽽不是看上去很美好,但实际⽤不到的功能,⽐如说ssr,中后台管理系统中很少会涉及这⼀⽅⾯,更不⽤说umi也提供了,甚⾄扩展体系中还提供了以及 、等.

⾃定义路由

其实也可以模仿官⽅的

可以看到,两者都是递归遍历得到路由树,然后使⽤ {route.breadcrumbName} 做⼀层包裹⽤于跳转,达到⾃定义路由的⽬的这⾥的情况适⽤于搭建中后台管理系统routers1. mpa

这⾥需要注意,开启了mpa之后,就只能映射到⼀级路由,从 .umi ⽂件中可以看出根路由规则改变了,请使⽤ XXX.html进⾏访问

分包

关于umi的分包,我理解分包是指把⼀个应⽤的部分拆出去,然后按需引⼊.拆的部分可以是路由、model、service、组件等等这是个⼩众的需求,有⼏个场景会⽤上1.⼀个场景是路由的分包

⼀个站点会包含很多路由,然后⼀些场景下,⽐如业务项⽬,或者umi ui的插件化,或者项⽬太⼤了想要拆⼦系统,都会希望能把其中部分路由拆出去,交给其他⼈维护,然后拆出去的部分提供umd包进⾏对接

2.⼀个场景是组件的分包

⽐如云凤蝶的场景,云凤蝶包含page和component,page是架⼦,由多个component组成,但包含哪些component是不确定的.所以做component的分包可以让page按需引⽤component.

对接⽅式1.npm依赖

2.umd包

各有优劣势.第⼀种应⽤场景有限;第⼆种可以在运⾏时(html)灵活组合,但是会有冗余问题.关于冗余

⽐如包a和包b都依赖antd,antd应该如何处理?可以想到的⽅案有,

1. externals(webpack ⽀持外部引⽤)2. 公⽤dll但会带来额外的问题,

1.某些原本可以按需加载的包⽆法按需,⽐如antd,只能全量引⼊

2.版本同步以及升级问题,⽐如之后要升级antd@4,那么所有的分包都需要⼀起升级

问题汇总

⽬前umi 3.x问题还是会有⼀些的,主要是⽂档⾥记录不全src/global.js与 src/global.css

⾃定义字体

总结

回归到实际业务中,我们⽬前所遇到的问题是应⽤已经变成巨⼤的包了,虽然使⽤的技术栈依赖都⽐较新,但长此以往下去历史包袱显⽽易见的会⽐较沉重,更不⽤说各个模块⾥混杂的 flow.js TypeScript jsx 各种不兼容的写法了,因此解耦还是很有必要的.

umi可以作为先⾏试验⽅案,主要是为了将项⽬中打包相关的代码从主包中抽离出去,好处是这样打包器的优化就基本不受⽼项⽬的代码风格影响,在满⾜了之前的需求之后,还可以通过插件的形式,不断优化研发流程,提⾼开发效率,提⾼性能;且对于⽇常开发可以做到⽆感知升级.使⽤现在的协同系统中的架构进⾏调试和打包与替换为umi做⼀个对⽐(相关例⼦请参考现场演⽰):

projectheihu-web

dev调试速度build包⼤⼩3.55 min

50.5 MB23 MB

umi-heihu-web1.12 min

后记

也可以参考 使⽤ Cordova 来达到跨平台的⽬的.成本⽐RN要⼩很多.over!