前言
Umi作为企业级前端应用框架，其可扩展，开箱即用的特性,可以大大提供前端的开发效率
【实际项目中】我发现还有很多可以优化的地方，于是基于umi3封装了脚手架umits
阅读文章之前建议先下载项目跑起来项目地址，点我！！！
Umits【5分钟】搭建大型项目
Umits基于umi3和umicli，已经做了编译打包优化，构建优化，规范集成，工具集成，demo展示
用户能够快速介入开发，且只需要关注业务开发，提高人效，同时代码规范的集成一定程度保证了代码质量
前端lint规范可以一定程度保证代码质量，但是还有一些无法覆盖的，建议大家参考：
前端大型项目系列（一) - 前端代码规范
umits使用
脚手架方式
Umits架构
Umits优化效果
描述
优化前
优化后
项目状态
效果
体积
793kb
236kb
项目引用了lodash
减小70%
如何做到？
59kb
4.99KB(gzip)
用dayjs替换moment，同时解决moment国际化语言包大体积问题
至于线上没有sourceMap会影响bug排查问题解决办法：接入前端监控Sentry，Sentry支持单独上传SourceMap定位bug
Sentry文档
Umits源码
注释文件
1066ms
400ms
提速60%
恢复注释
2500ms
1550ms
提速40%
umirc.ts
umirc.test.ts
umirc.pre.ts
umirc.pro.ts
针对不同环境，侧重点不一样，本地需要增量编译速度更快，线上侧重稳定和缩小打包体积
4套环境配置，请看项目源码Umits项目源码【已开源】欢迎一起完善
链接：(github.com/Master-H/um…)
工具函数封装
封装前
封装后get、post、put、delte统一使用方式
入参都是（url,object)形式，使用方式统一方便，并且封装好了接口报错，实现快速定位，无需单独处理
cancel函数,实现请求取消
取消效果如下
withCancelHoc，取消请求高阶组件
上面代码实现了，组件卸载默认取消当前页面的请求，在某些场景有必要的，比如两个Tab页面，完全一样，仅仅入参不一样，就有可能因为因为网络问题，导致数据错乱
TabA页面：请求数据get1，数据还没回回填，切换到TabB
TaB页面：请求数据get2，由于网络问题，get2先到回填数据，过了一会儿get1数据回填覆盖get2，就会导致显示出错
代码规范校验
git cz、 Eslint、stylelint强制校验,不符合要求，禁止提交
Umits产生背景
公司现状
公司内部已经有5个大型项目基于umi开发且稳定运行，但没有沉淀出一套基于实战优化的脚手架
我思考一个问题，也问了其他人，从新搭建一个基于Umi项目，需要怎么做，需要多久？
搭建新项目两种做法：
第一种
第二种
存在痛点
针对上面痛点umits脚手架就诞生了,同时配合前端大型项目系列（一) - 前端代码规范，5分钟即可搭建高质量可维护的大型项目
demo教程
常用的：菜单配置化、工具函数，异步加载,高阶组件都有demo案列，方便快速上手
总结
umits开发，并没有涉及多复杂高深的技术，大部分都是基于经验和总结，沉淀出的一个可以快速搭建高质量，方便上手的项目 所在一开始我也在犹豫，到底要不要做写这个脚手架
但是后来思考一下：通过这个脚手架，我们可以将原来不复杂的事情变得更简单，而且可以大大提升开发效率，项目质量，那么Just do It !
项目umits已经开源
如果本文对你有用，点赞支持一下，不足的地方轻拍，欢迎一起进步！
最后预告一下，从0到1开发umi插件，已经在路上了