新福利M前端优化方案
体验角度
技术角度
1.页面加载时体验
体验角度
2.用户使用时体验
页面加载时
1、Resource Hints进行预加载，来提高第一次加载的效率
2、PWA进行资源的缓存，来提高第二次加载的效率
进行了缓存依旧慢
在加载过程中会使用骨架屏过度
用户使用时-图片优化
尺寸
通过图片服务器修改为200x200
大小：20kb
服务器存储的默认为715x715
大小：172KB
缩小8.5倍
用户使用时-图片优化
类型
把图片转换成新webp格式：
大小：10.5k
通过图片服务器修改为200x200
大小：20kb
缩小2倍
通过这一系列操作，图片大小能缩小17倍，平均也会超过10倍以上
用户使用时-图片优化
懒加载
尺寸小了还不行，页面加载呈现是，为了不让图片的加载阻塞系统功能呈现时间，针对每一张图片进行懒加载。-即在加载完整个页面功能之后再去加载图片。
用户使用时-页面优化
页面懒加载
我们只需要首屏内容。
不是首屏的内容等屏幕滑到在加载。
用户使用时-页面优化
路由懒加载
系统包含很多页面，每个页面都存在一定的js与css功能，但不是每次都会用到，所以我们将所以页面全部解耦，每个页面都会在使用时加载，不会产生过多的无用加载。
用户使用时-页面优化
动画
尽量在页面跳转时增加必要缓动效果
其他地方争取添加一些动画效果
技术角度
技术角度
1、乐高式组件开发（试图拆分，便于更好复用）
2、Vue的模块化（便于多人协同）
3、SASS体系化（暂包含颜色值、圆角值、通用动画提取等，便于后续主题改造）
4、路由守卫+keepalive（处理跳转时的一些特殊情况）
5、接口请求的统一封装（便于对请求的集中处理）
6、代码在开发过程中会定期CodeReview