SPA页面性能优化

Posted 2020-10-24 笑嘻嘻的小银

1. 快速启动 —— 极大提升加载速度（important）

快速启动应用，并行发起 Bundle 加载&拉取初始数据。相信大家已经发现了，SPA 初始化时候，不得不等待 bundle 返回并执行后，才会发起数据加载。

由于在移动设备上（即便有缓存）bundle 加载极为耗时，我们可以充分利用这段时间将数据进行预加载。这项特性，使得后面的优化起到更加明显的效果。

如下示例代码：

// app.js
Promise.all([load(‘bundle‘), load(‘data‘)])

 

2. 根据路由拆分 —— 减少初始加载体积

利用异步加载方式，在路由注册时提供异步拉取组件的方法，仅在需要进入对应路由时，对应组件才会被加载进来。

route({
  Home: () => import(‘@/coms/home‘),
  About: () => import(‘@/coms/about‘)
})