[RFC] 关于进一步提升 OpenSumi 首屏可用时间的优化思路

[erha19]

背景

当前 OpenSumi 内部存在较多功能上的耦合，导致整体首屏可用时间需要 3秒左右（所有功能展示），这里主要记录一些可以优化的点便于后续讨论及改进。

思路一：优化 TabBar 渲染逻辑

修改框架 TabBar + Panel 渲染逻辑，目前框架内所有声明的 TabBar + Panel (如：right，left，bottom 区域) 都会在首次加载时一并渲染，导致大量页面资源用于渲染/运算不可见内容，可以将这部分逻辑修改为按需加载。

相关代码在：

core/packages/main-layout/src/browser/tabbar/panel.view.tsx

Lines 78 to 80 in 19ad0bf

	<NoUpdateBoundary visible={currentContainerId === containerId}>
	<PanelView titleMenu={titleMenu} side={side} component={component} />
	</NoUpdateBoundary>

这里会渲染全部视图后再通过 visible 参数进行展示控制。简单修改如下：

const component = useMemo(() => (
    tabbarService.visibleContainers.find((component) => component.options?.containerId === currentContainerId
    )), [currentContainerId, tabbarService.visibleContainers]);

  const containerId = component?.options?.containerId;
  if (!containerId) {
    return null;
  }
  const titleMenu = tabbarService.getTitleToolbarMenu(containerId);
  return (
    <div
      id={id}
      className={clsx(styles.tab_panel, {
        [styles.tab_panel_hidden]: !currentContainerId || currentContainerId === '',
      })}
    >
      <div
        key={containerId}
        className={clsx(styles.panel_wrap, containerId) /* @deprecated: query by data-viewlet-id */}
        data-viewlet-id={containerId}
        style={currentContainerId === containerId ? panelVisible : panelInVisible}
        id={id}
      >
        <ErrorBoundary>
          <PanelView titleMenu={titleMenu} side={side} component={component} />
        </ErrorBoundary>
      </div>
    </div>

这里还需要进一步处理视图缓存逻辑，同时一部分视图实现上依赖了这种不正确的“快速渲染”方式，也需要进行逻辑调整。

初步效果，首屏可用时间能减少约 2 s，效果十分明显，在视图多的情况下会更加明显
修改前：

修改后：

思路二：前置 MainLayout 等视图逻辑执行

见：#2484