关于react-app-rewired和craco的部分性能对比

前言

由于react-app-rewired的库太久的时间没进行维护,上次维护大约是在一年前了，所以考虑调研使用新的打包库craco
所以除了对新的库按文档进行配置之外，还需要对其性能进行测试，考察其打包时间、编译时间与原来有多大的差异，是否在可接受的范围内。

1. react-app-rewired

1.1 build 耗时测试

对 react-app-rewired进行了5次打包时间记录，记录时间如下(忽略第二组，为手误)

react-app-rewired build 时间

1.2 编译 耗时测试

对react-app-rewired进行了5次编译耗时记录，记录时间如下

react-app-rewired编译时间

1.3 打包后文件状态

记录打包后文件状态如下:

react-app-rewired start 时间

2. craco

2.1 build 耗时测试

对craco同样进行5次打包，记录其每次耗时和文件变化，具体时间如下：

craco build 时间

2.2 编译 耗时测试

对craco进行了5次编译耗时记录，记录时间如下

craco编译时间

2.3 打包后文件状态及文件大小前后对比

打包后的文件大小，与react-app-rewired打包编译的文件大小对比 详情如下：

build后大小及对比

3. 对比结果

3.1 build耗时对比

1. react-app-rewired的打包时间有些不太稳定，在[29，51]的范围内浮动，平均值约为 40.5s
2. craco的打包时间相对于react-app-rewired，是比较稳定的，在[43,48]范围内浮动，平均值约为 45.5s

react-app-rewired略快 craco 5s

3.2 编译耗时对比

1. react-app-rewired 的编译时间在[24，36]区间内，均值约为32s
2. craco的编译时间在[17,33]区间内，略快于react-app-rewired，均值约为 27s

react-app-rewired略慢 craco 5s

3.3 文件大小对比

build后大小及对比

整体来看，craco整体还是要比react-app-rewired打包的文件要稍大一写，目前是 增加了 55.22kb的体积