前端框架时代，为开发体验、效率与页面性能带来，非常大的革命。大家纷纷拿起一系列打包工具(webpack/parcel etc.)，配合一系列加载器快速搭建起一个 SPA 页面。
前言
-
提升页面切换体验
-
降低切换时间
-
易于部署&前后端分离
-
初始加载脚本较大
-
首屏空白时间较长
-
页面返回时，数据被动重新拉取
SPA 之殇
愈发发福
不仅仅是体积
Keep SPA Fit
如何维护一个大型 SPA？
性能优化
1. 快速启动 —— 极大提升加载速度（important）
// app.js
Promise.all([load('bundle'), load('data')])
2. 根据路由拆分 —— 减少初始加载体积
route({
Home: () => import('@/coms/home'),
About: () => import('@/coms/about')
})
3. 独立打包异步组件公共 Bundle —— 提高复用性&缓存命中率
4. 组件预加载 —— 减少页面切换时间
// 所有包含Page的路由组件均会被预加载
boostraper.loadMatch('Page')
5. 使用 ESM 语法 —— 按需打包工具库，降低 Bundle 体积
6. 配合 PWA 使用，口感更佳 —— 降低首屏渲染时间，极大提升体验
体验优化
1. 构建你的极简Skeleton Page
-
-
配合 PWA 首屏缓存，骨架图可实现瞬间加载&展示，首屏视觉上有冲击性地提升
-
-
消除页面初始加载因多次重绘&资源加载导致的"抖动"
2. 页面切换 Loading
-
-
在确保组件&数据加载完毕前，可保证页面可交互性，减少用户阻塞感
-
-
在大多数原生应用，转场动画属于标配
-
即时组件&数据已经完全加载，在切换至新页面瞬间，依旧需要页面渲染时间，这段时间可能导致页面短暂空白或者"视觉阻塞"
-
通过转场动画时间，可以很好地缓解这个问题，大多数页面保证在转场动画完毕之后依然渲染完毕
最后
服务热线 19970861797
