代码分割
传统静态导入
所有组件代码会合并到初始包中，增加首屏加载时间。
import Login from './components/login.vue' // 所有组件打包到同一个chunk
动态导入：
将该组件分离为独立的 JavaScript 文件（如 login.hash.js）。
按需加载：只有当访问 / 路由时，才会下载并执行该组件的代码。
初始加载的 JS 包体积减小，加快 首屏渲染速度（特别是大型应用）
component: () => import('./components/login.vue')
动画、过渡效果优化
requestAnimationFrame（简称 rAF）和 setTimeout 都可以用于延迟执行代码，但 rAF 在动画和频繁更新的场景中具有显著优势。
requestAnimationFrame
- 屏幕刷新率同步，避免丢帧或过度渲染
- 浏览器会自动优化调用时机（如页面不可见时暂停）
- 浏览器会合并多次 DOM 操作，减少不必要的重绘（Repaint）和回流（Reflow）
setTimeout
- 延迟执行工具，不关心渲染时机
- 严格按指定时间触发，无论页面状态
- 可能因主线程阻塞导致动画卡顿或不连贯
- 每执行一次都会触发页面布局计算
增加路由元信息meta
在导航守卫或路由对象中访问路由的原信息，增加页面标识
滚动行为
- 使用前端路由切换新路由时，想要页面滚动到顶部或者保持原先位置，vue-router可以自定义路由切换时页面如何滚动
