首屏白屏加载优化

1、计算首屏加载时间（如何体现性能优化了?）

        计算 Vue3 项目的首屏加载时间（First Screen Load Time，简称 FSL）可以帮助评估用户首次看到完整页面所需的时间。

2、优化手段

1、采用异步组件方式（拆分大模块，针对于组件的优化）

2、 使用骨架屏或 loading 动画缓解白屏

        比如首页加载视频流或摄像头列表前，先展示占位：<Skeleton :loading="loading" />

实践方式一：骨架屏

使用 Element Plus 的 <ElSkeleton> 示例：

Element Plus 的组件 <ElSkeleton>，它内部已经封装好了基于 loading 的显示逻辑。

    <ElSkeleton :loading="loading" animated> 会根据 loading 的值自动控制哪个插槽（slot）显示：

loading 值	显示内容
true	#template 插槽
false	#default 插槽

实践方式二：图片加载 loading 占位图

3、 按需引入 Element Plus

4、 路由懒加载（vue-router 懒加载）

Vue Router 内部逻辑会判断：

• 如果路由配置的 component 是一个函数（返回一个 Promise），就认为是异步组件；

• Vue 会自动处理加载状态，不需要你额外用 defineAsyncComponent 包一层。

方法	是否能懒加载	推荐场景
() => import('...')	是懒加载	✅ 用于 Vue Router 配置
defineAsyncComponent	是懒加载	用于组件中显示时手动控制加载过程，比如显示 loading 或 error

如果你想在组件内手动加载一个异步组件并显示 loading 状态，那才用 defineAsyncComponent：