[Bug] 设置页面切换 Language Model Tab 异常卡顿

[ZeekoZhu]

📦 部署环境

Official Preview

📌 软件版本

v1.16.12

💻 系统环境

Other Linux

🌐 浏览器

Other

🐛 问题描述

通过左上角打开全局设置后，切换到 Language Model Tab，UI 需要 1 ~ 2 秒才能更新

📷 复现步骤

No response

🚦 期望结果

通过左上角打开全局设置后，切换到 Language Model Tab，UI 在 0.5 秒内完成更新

📝 补充信息

profiler 截图

network 截图

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

📦 Deployment environment

Official Preview

📌 Software version

v1.16.12

💻 System environment

Other Linux

🌐 Browser

Other

🐛 Problem description

After opening the global settings through the upper left corner, switch to the Language Model Tab. The UI will take 1 ~ 2 seconds to update.

📷 Steps to reproduce

No response

🚦 Expected results

After opening the global settings through the upper left corner, switch to the Language Model Tab, and the UI will be updated within 0.5 seconds.

📝 Supplementary information

profiler screenshot

network screenshot

[lobehubbot]

👀 @ZeekoZhu

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[dosubot]

@ZeekoZhu 你好！我是Dosu，一个可以帮助你解决 bug、回答问题，并成为贡献者的机器人。我会在等待人类维护者的过程中帮助你。

I found a similar unsolved discussion regarding performance issues when deploying on Vercel, which might be related to the problem you're experiencing ^[1].

Potential Causes and Solutions

1. State Management Bottlenecks:

   • The state management for the global settings UI is handled using selectors, which might cause redundant calculations or unnecessary re-renders if not optimized properly ^[2].

2. Memoization Techniques:

   • Ensure that memoization techniques like React.memo and useMemo are used effectively to prevent unnecessary re-renders. The ModelSwitchPanel and ModelSelect components already use these techniques, but you might want to review their implementation for any missed optimizations ^[3][4].

3. Lazy Loading and Asynchronous Data Fetching:

   • Implement lazy loading and asynchronous data fetching for the Language Model Tab to improve performance. This can help in reducing the initial load time and make the UI more responsive.

4. Performance Reports:

   • Review the Lighthouse performance reports for the global settings UI to identify specific areas for optimization. You can find the reports for both desktop and mobile versions here and here ^[5].

5. Network Requests:

   • Analyze the network requests to ensure that they are optimized and not causing delays. The provided network screenshot shows multiple fetch requests; consider batching these requests or using caching mechanisms to reduce load times.

By addressing these potential bottlenecks, you should be able to improve the performance of the Language Model Tab and achieve the desired UI update time of under 0.5 seconds.

To continue talking to Dosu, mention @dosu.

[Matinal111]

确实，近期更新的几个版本在语言模型选项这里变卡顿了

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Indeed, several recently updated versions have become stuck in the language model options.

[arvinxx]

语言模型选项由于承载了过多的 Provider， 30+ 的 provider 共计 100+ 表单字段是导致页面卡顿的根本原因。说实话这么多 provider 也是我们一开始没意料到的，因此这个 RFC（ #4859 ）会修改设计方案，从根本上解决这个问题。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

The language model option carries too many providers. 30+ providers totaling 100+ form fields are the root cause of page lag. To be honest, we did not expect so many providers at the beginning, so this RFC (#4859) will modify the design plan to fundamentally solve this problem.

[lobehubbot]

✅ @ZeekoZhu

This issue is closed, If you have any questions, you can comment and reply.
此问题已经关闭。如果您有任何问题，可以留言并回复。

[lobehubbot]

🎉 This issue has been resolved in version 1.44.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀