使用rabowl一段时间后,发现如果子应用过多时(packages目录下安装的应用过多,特别是每个项目都安装了依赖),主应用在启动时扫描目录的耗时过长。
目前我们公司前端拆分了10个子应用,主应用的启动时间达到了7分多钟。
因此做了一下测试
序号 | 修改方案 | 初次启动平均耗时 |
---|---|---|
1 | 不做变更 | 7m20s |
2 | 删除packages 目录 |
2m50s |
3 | 删除packages 目录,并将libraries 里面的公共组件和公共函数提出,做为npm 库 |
1m28s |
从以上数据可以看出:
在 package.json 所在目录下的文件越多,umi启动速度越慢。
修改方案:
- 移除packages目录,各个子应用分开部署。并将rbui和rbutils改成业务组件库和工具库,上传到npm库。
- 项目目录重新整理,将除libraries和packages以及git相关配置的文件都放到main目录下。在main目录下启动主应用也可以达到上表第三条相同的效果。
PS:查阅umi代码和webpack文档,及相关网络资源,都没有这个问题的解释。资料显示,webpack编译分成了3个阶段,初始化阶段=> 构建阶段=>生成阶段。
构建阶段webpack是从entry开始分析相关文件,也就是说webpack应该是顺着依赖链来读取文件的,而不是读取所有文件。那么为什么项目中文件越多,编译速度越慢呢?
会不会是umijs导致的变慢呢?
带着这样的疑问,我新建了一个umijs项目和一个create-react-app项目。
序号 | 测试方案 | umijs@3.5.22 |
cra |
---|---|---|---|
1 | 全新项目 | 6.82s |
7.8s |
2 |
copy 两份node_modules
|
17.02s |
6.8s |
3 |
copy 三份node_modules
|
18.40s |
7.2s |
从上表可以看出cra并不会收到无关文件数量的影响。而umijs会被无关文件数量拉低编译性能。
具体为什么umijs会被无关的文件影响性能,希望有大佬能解答一下。