码迷,mamicode.com
首页 > 其他好文 > 详细

SPA页面性能优化

时间:2018-02-09 22:34:23      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:home   加载速度   预加载   data   port   app   代码   color   route   

1. 快速启动 —— 极大提升加载速度(important)

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

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

如下示例代码:

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

 

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

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

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

 

 

SPA页面性能优化

标签:home   加载速度   预加载   data   port   app   代码   color   route   

原文地址:https://www.cnblogs.com/chenzeyongjsj/p/8436755.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!