[!info] related notes

• 前置笔记:
• 相关 MOC:

memoflow-frontend-performance-optimization-jump-to-main-app

发现

登录成功跳转进主页面的时候会有一段时间的白屏，会加载较长时间。

分析

方案1 （代码预热）

实现代码预热，即在登录界面的空闲时就预加载 主 类似 preload

/**
 * Web bootstrap prewarm helpers.
 *
 * Keeps the authenticated app chunk warm after the auth screen has painted.
 */

export function prewarmMainAppBootstrap(): void {
  if (typeof window === 'undefined') {
    return;
  }

  const win = window as Window & {
    requestIdleCallback?: (callback: () => void, options?: { timeout?: number }) => number;
  };

  const warm = () => {
    void import('./app').catch((error) => {
      if (import.meta.env.DEV) {
        console.debug('[web] main app prewarm failed', error);
      }
    });
  };

  if (typeof win.requestIdleCallback === 'function') {
    win.requestIdleCallback(warm, { timeout: 3000 });
    return;
  }

  globalThis.setTimeout(warm, 0);
}

方案二（深度 拆包）

把 @dailyuse/app-vue 的启动面拆成了更窄的出口层，避免 auth/main 一次性拉进不需要的代码。

• apps/web/src/platform/di-app.ts 里的重型业务服务改成了懒加载代理，第一次真正用到时才动态 import 对应模块和 adapter。
• usePresentationBootstrap 里的用户设置加载改成了空闲时再跑，减少首屏主线程阻塞。
• 国际化 locale 文件， 先按当前语言加载，切换语言时再补
• 现在把 GlobalCommandPalette、GlobalSheet、GlobalConfirmDialog、Toaster 都首屏挂上了，这些可以延后到首帧之后再异步挂载。
• packages/app-vue/src/modules/notification/initialization/index.ts 被 apps/web/src/bootstrap/app.ts 静态引入了，这类注册可以移到 idle 阶段动态导入。
• packages/ui-vue-shadcn/src/index.ts 是一个很大的 barrel，shell 代码从根入口拿 TooltipProvider、Command*、Sheet*、AlertDialog*，容易把很多 UI 依赖一起拖进主包。更值钱的是改成深层导入，或者单独做 shell-only 入口。
• packages/app-vue/src/web-shell.ts 可以再拆成 core 和 overlays，让 App.vue 先只依赖 theme/locale/bootstrap/progress，overlay 后置加载。