前言

Umi作为企业级前端应用框架,其可扩展,开箱即用的特性,可以大大提供前端的开发效率

【实际项目中】我发现还有很多可以优化的地方,于是基于umi3封装了脚手架umits

阅读文章之前建议先下载项目跑起来项目地址,点我!!!

Umits【5分钟】搭建大型项目

Umits基于umi3和umicli,已经做了编译打包优化,构建优化,规范集成,工具集成,demo展示

用户能够快速介入开发,且只需要关注业务开发,提高人效,同时代码规范的集成一定程度保证了代码质量

Umi3最佳实践-Umits脚手架【已开源】_脚手架

前端lint规范可以一定程度保证代码质量,但是还有一些无法覆盖的,建议大家参考:

前端大型项目系列(一) - 前端代码规范

umits使用
  • 脚手架方式
npm install umits -g
umits i复制代码
Umits架构

Umi3最佳实践-Umits脚手架【已开源】_脚手架_02

Umits优化效果

总体积减小557kb!

描述 优化前 优化后 项目状态 效果
体积 793kb 236kb 项目引用了lodash 减小70%

如何做到?

dayjs替换moment

描述 优化前 优化后
体积 59kb 4.99KB(gzip)
// .umirc.tsimport AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';export default defineConfig({	// 省略代码...chainWebpack(memo) {    	// dayjs替换momentmemo.plugin('AntdDayjsWebpackPlugin').use(new AntdDayjsWebpackPlugin());
    },

}复制代码

用dayjs替换moment,同时解决moment国际化语言包大体积问题

关闭sourceMap

// .umirc.tsexport default defineConfig({	devtool: false // 关闭sourceMap,减小体积,提高编译速度}复制代码

至于线上没有sourceMap会影响bug排查问题解决办法:接入前端监控Sentry,Sentry支持单独上传SourceMap定位bug

Sentry文档

抽取公共资源,避免资源重复打包

//.umirc.pro.ts里面配置
 chainWebpack: function(config, { webpack }) {
        config.merge({optimization: {minimize: true,splitChunks: {chunks: 'all',minSize: 30000, // 单位byteminChunks: 1, // 被引用次数maxAsyncRequests: 5, // 拆分后异步加载chunk的数量次数,大于5异步要排队automaticNameDelimiter: '.', // chunks名字分隔符cacheGroups: {common: {name: 'common', // 基本框架chunks: 'all', // 不区分动态还是同步方式,只要可拆就拆test: /[\\/]node_modules[\\/](react-dom|react|dva|redux)[\\/]/,
                            enforce: true,priority: 10,
                        },vendor: {// 公共chunksname: 'vendors',test: /^.*node_modules[\\/](?!react|react-dom|antd).*$/,
                            chunks: 'all',priority: 9,
                        },'async-commons': {// 其余异步加载包chunks: 'async', //只优化动态加载的代码minChunks: 2,name: 'async-commons',priority: 8,
                        },
                    },
                },
            },
        });// dayjs替换moment,减小包体积config.plugin('AntdDayjsWebpackPlugin').use(new AntdDayjsWebpackPlugin());
    },复制代码

其他优化,异步加载资源等

项目源码

Umits源码

编译构建提速60%

描述 优化前 优化后 效果
注释文件 1066ms 400ms 提速60%
恢复注释 2500ms 1550ms 提速40%

配置4套不同环境

  • umirc.ts
  • umirc.test.ts
  • umirc.pre.ts
  • umirc.pro.ts

针对不同环境,侧重点不一样,本地需要增量编译速度更快,线上侧重稳定和缩小打包体积

4套环境配置,请看项目源码Umits项目源码【已开源】欢迎一起完善

链接:(github.com/Master-H/um…)

优化前编译时间

Umi3最佳实践-Umits脚手架【已开源】_Umi3_03

优化后编译时间!

Umi3最佳实践-Umits脚手架【已开源】_脚手架_04

工具函数封装

axios封装

  • 封装前
axiosGet('/login',{ 
	params:{       	  age:1}
})
axiosPost('/login', { age:1 })复制代码
  • 封装后get、post、put、delte统一使用方式
axiosGet('/login',{ age:1 }) // 不用单独放在params,保持风格统一axiosPost('/login', { age:1 })

axiosPut('/login',{ age:1 })
axiosDelete('/login', { age:1 })复制代码

入参都是(url,object)形式,使用方式统一方便,并且封装好了接口报错,实现快速定位,无需单独处理Umi3最佳实践-Umits脚手架【已开源】_Umi3_05

取消请求封装

  • cancel函数,实现请求取消
import { cancel } from '@/utils/axios';
cancel('cancel message');复制代码

取消效果如下Umi3最佳实践-Umits脚手架【已开源】_脚手架_06

  • withCancelHoc,取消请求高阶组件
import WithCancelRequestHoc from '@/components/withCancelRequestHoc';const PaneA: React.FunctionComponent<IProps> = () => {
    useEffect(() => {
        TestService.getTest1();
        TestService.getTest2();
    }, []);return (<div><h1>切换到面板</h1></div>);
};export default WithCancelRequestHoc(PaneA);复制代码

上面代码实现了,组件卸载默认取消当前页面的请求,在某些场景有必要的,比如两个Tab页面,完全一样,仅仅入参不一样,就有可能因为因为网络问题,导致数据错乱

TabA页面:请求数据get1,数据还没回回填,切换到TabB

TaB页面:请求数据get2,由于网络问题,get2先到回填数据,过了一会儿get1数据回填覆盖get2,就会导致显示出错

代码规范校验

git cz、 Eslint、stylelint强制校验,不符合要求,禁止提交

Umi3最佳实践-Umits脚手架【已开源】_Umi3_07

Umits产生背景

公司现状

公司内部已经有5个大型项目基于umi开发且稳定运行,但没有沉淀出一套基于实战优化的脚手架

我思考一个问题,也问了其他人,从新搭建一个基于Umi项目,需要怎么做,需要多久?

搭建新项目两种做法:

  • 第一种
1、git clone 【umi老项目】
2、删掉不需要用的文件夹,npm包,业务相关代码
3、项目跑起来
4、可能半天或者一天过去了(不同熟练程度耗时不一致)复制代码
  • 第二种
 1、umi官方脚手架一把梭
 2、开始配置Eslint prettier 
 3、复制通用工具函数组件,并删掉不需要的复制代码

存在痛点

1、耗时长,不够高效
2、Eslint prettier,stylint,git cz等配置不统一
3、项目用umi2,现在umi3,umi2的配置不适用umi3,需要时间去了解复制代码

针对上面痛点umits脚手架就诞生了,同时配合前端大型项目系列(一) - 前端代码规范,5分钟即可搭建高质量可维护的大型项目

demo教程

常用的:菜单配置化、工具函数,异步加载,高阶组件都有demo案列,方便快速上手

Umi3最佳实践-Umits脚手架【已开源】_Umi3_08

总结

umits开发,并没有涉及多复杂高深的技术,大部分都是基于经验和总结,沉淀出的一个可以快速搭建高质量,方便上手的项目 所在一开始我也在犹豫,到底要不要做写这个脚手架

但是后来思考一下:通过这个脚手架,我们可以将原来不复杂的事情变得更简单,而且可以大大提升开发效率,项目质量,那么Just do It !

项目umits已经开源

如果本文对你有用,点赞支持一下,不足的地方轻拍,欢迎一起进步!

最后预告一下,从0到1开发umi插件,已经在路上了