核心是减少主线程阻塞、按需加载、避免渲染抖动；通过懒加载（动态import+defineAsyncComponent/Suspense）、预加载（requestIdleCallback+行为预测）、模块缓存（Map缓存Promise）、延迟布局读取（ResizeObserver/raf）及骨架屏实现。

核心是减少主线程阻塞、按需加载、避免渲染抖动。重点不在“写得快”，而在“什么时候加载、怎么加载、加载后怎么用”。

懒加载组件配合动态 import

不要在应用启动时一次性导入所有组件，尤其对非首屏、条件触发或路由级组件：

• 用 import() 替代静态 import，让打包工具（如 Vite 或 Webpack）自动生成异步 chunk
• 结合 defineAsyncComponent（Vue）或 Suspense（React 的 lazy + Suspense）统一处理加载态和错误态
• 示例（Vue）：
  const AsyncChart = defineAsyncComponent(() => import('@/components/Chart.vue'));

预加载关键路径组件

用户大概率要访问的组件，可在空闲时机提前拉取，不阻塞当前任务：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 利用 requestIdleCallback 或 setTimeout(..., 0) 在主线程空闲时触发预加载
• 对用户行为做简单预测，比如鼠标悬停菜单项 300ms 后预加载对应页面组件
• 避免在 mounted 或 useEffect 中立即调用 import()，改用防抖+空闲调度

缓存已加载模块，避免重复解析

动态 import 返回的是 Promise，但模块本身不会被自动缓存——同一路径多次 import() 仍会发起新请求或重新执行模块代码：

立即学习“Java免费学习笔记（深入）”；

• 手动缓存 Promise 实例，例如：
  const cache = new Map();
  function loadComponent(path) {
    if (cache.has(path)) return cache.get(path);
    const p = import(path);
    cache.set(path, p);
    return p;
  }
• 注意：缓存的是 Promise，不是组件实例；组件实例仍由框架管理，无需手动复用

加载过程不触发强制同步布局

组件挂载前若需读取 DOM 尺寸、计算样式，容易导致 layout thrashing，拖慢插入速度：

• 避免在组件 setup 或 constructor 中调用 getBoundingClientRect、offsetHeight 等会触发布局的操作
• 改用 ResizeObserver 或 requestAnimationFrame 延迟到渲染帧内执行
• 首次加载时用骨架屏占位，保持容器尺寸稳定，防止后续重排