Performance issues when there are many menus

[beiifeng]

• 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]

开了 devtools ？

[beiifeng]

开了 devtools ？

没开DevTools 也卡

[sendya]

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

[beiifeng]

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

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

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

[tangjinzhou]

设计交互上优化啊

[beiifeng]

设计交互上优化啊

也是一种思路。

[wsxe9988]

菜单栏 menu 这块能否支持虚拟滚动来提升性能，解决卡顿问题呢

[beiifeng]

由于trigger的原因，生成了大量的无用dom(在未折叠的情况下，生成了大量dom，对比ant-design，这些dom只会在需要的时候才创建)。

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.