Performance issues when there are many menus

beiifeng commented 3 years ago

[ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.0.0-alpha.5

Environment

Windows 10 Pro 19043.1288 | Microsoft Edge 95.0.1020.30 | Google Chrome 92.0.4515.107 | Vue 3.2.11 |

Reproduction link

https://github.com/beiifeng/vue3-report

Steps to reproduce

1、 download reproduction. 2、yarn 3、yarn serve 4、open link http://localhost:8080 5、input username and password with anything. 6、waiting seconds and menu will be load. 7、ISSUE: click left-top MenuFold icon, it tooks a long time to effect.

下载项目启动，进入网页，账号密码随便输入，登录后，进去正常页面。稍等片刻菜单加载出来，点击侧边栏的折叠展开按钮巨卡，反应很慢。如果将 src/layouts/data.js 中的菜单删除一半，响应速度就可以。

不是我故意要整这么多菜单，是项目上就有这么多菜单，我也不知道他们怎么制造出来的。从react转过来，vue2上面的性能没有试验过。看了一下pro-layout，感觉封装东西太多，反倒不适合我们，所以照着https://next.antdv.com/components/menu-cn 及 https://next.antdv.com/components/layout-cn 自己写的。通过DevTool 调试，发现展开折叠时内存飙升。

请大佬指教 ^。^

What is expected?

点击菜单展开折叠时不那么卡顿

What is actually happening?

展开折叠时很卡

sendya commented 3 years ago

开了 devtools ？

beiifeng commented 3 years ago

开了 devtools ？

没开DevTools 也卡

sendya commented 3 years ago

你这菜单确实太多了，一个 pwa 系统有这么多菜单实在是无法想像，你换别的 ui 库试试会不会卡吧，我这没什么能帮你的了

beiifeng commented 3 years ago

你这菜单确实太多了，一个 pwa 系统有这么多菜单实在是无法想像，你换别的 ui 库试试会不会卡吧，我这没什么能帮你的了

之前是 roadhog 版本的react，那个时候不卡；然后升级umi的时候，使用ant-design-pro试了试，生成菜单的时候会卡，展开折叠不卡，所以就没用ant-design-pro，还是自己写的，不怎么卡；现在要换成VUE，菜单管理页面(不是现在这个菜单选择)是个带tree的table，先用element-plus，感觉很卡，所以转到 ant-design-vue，菜单管理页面有点卡，但能接受。之前是使用qiankun做的微前端，主应用使用的react umi，左侧菜单栏在主应用上；现在主应用也要切换成 vue，所以就有了这个菜单栏展开折叠卡顿问题。

(⊙﹏⊙) Emmm，这个菜单是开发时管理员能看到的，分配角色的时候不会分那么多。大佬有什么优化思路吗