性能优化

路由懒加载

优化前

使用同步加载，打开 HomePage 页面有 109 个请求

📢并未打开 Profile 页面

优化后

添加路由懒加载后，打开 HomePage 页面，仅 88 个请求。

路由懒加载只在打开当前路由，才会加载当前所需要的组件。

参考：路由懒加载

defineAsyncComponent 异步组件

我们以 HomePage 的 LogoutDialog 组件为例，在点击 LogOut Button 时，LogoutDialog 需要被加载，但是也有可能不点击 LogOut Button，所以，LogoutDialog 组件可以设置为异步组件来进行加载。

优化前

即使不需要点击 LogOut Button，也会加载 LogoutDialog 组件

优化后

仅在点击 LogOut Button 组件后，才会加载该组件

使用场景

1. 当某个组件数据很大，加载时间较长，可以使用该组件提升初始加载速度
2. 在特定环境下才会使用的组件，可以使用该组件

参考：异步组件