一、关于SPA和首屏加载
1. 单页应用程序：SPA（single-page application）
它是一个JavaScript框架， 仅在该Web页面初始化时加载相应的资源。加载完成后，利用 JavaScript 动态的变换HTML的内容，不会重新加载公共资源或跳转（一个外壳页+多个页面片段），而MPA多页面模式是由多个完整页面组成，操作时整页刷新。
目前三种最流行的SPA工具是：Vue、React、Angular
2. 首屏加载
首屏加载时间（First Contentful Paint）是指从打开网站开始，到浏览器首屏内容渲染完成的时间（资源不一定全部加载完，但页面内容已完全展示）。
还有一个概念叫做 白屏时间 ，指的是浏览器输入URL网址到开始显示第一个字符的时间
// 计算首屏加载时间
console.log(new Date().getTime() - performance.timing.navigationStart)二、影响加载速度的因素
- 网络延时,数据请求慢
- 资源文件的体积过大
- 可能存在重复请求资源
- 加载脚本时渲染内容堵塞
三、优化方案
- 代码优化
- 懒加载（减小入口文件积）
- 压缩图片资源
- GZip压缩
- 避免组件重复打包
1.代码优化
减少http请求： 项目数据状态管理，减少请求次数：vue使用vuex、react使用redux
2.懒加载
将每个组件的js代码独立出来，在vue-router中配置路由参数，访问页面时，以函数的形式加载
routes:[
path: 'home',
name: '首页',
component: () => import('./components/home.vue')
]3. GZip
HTML和CSS文件包含大量的标签、空格等重复的字符串，Gzip压缩可以找出类似的字符串，临时替换它们，使整个文件变小。
配置后可以在线上地址看到，Content-Encoding: gzip
注： 图片文件不建议用gzip压缩
4. 压缩图片资源
网页上所展示的每一个图片，都需要进行一次 http 请求
CSS雪碧图 ：使用雪碧图可以把多个图片整合到一张图片中，减少HTTP请求次数。但是当整合图片比较大时，一次加载会比较慢，加载失败会导致多个位置的图片无法正常显示。
转换成base64：将图片数据编码成串字符串，来代替原本图像的地址，图片不需要再进行http请求。（缺点：无法缓存；转换后会导致CSS文件体积增大,渲染时长时间出现空白屏幕，影响用户体验）
SVG矢量图：常用于存储图标，只加载一次，图片不需要再进行http请求。图片放大也不会模糊
CRMEB v4 全开源电商系统，开发者首选
基于ThinkPhp6.0+uniapp 开发的客户管理加电商营销的新零售商城系统。能够真正帮助企业基于微信公众号H5、小程序、wap、pc、APP等，实现会员管理、数据分析,精准营销的电子商务管理系统。可满足企业新零售、批发、分销、预约、O2O、多店等各种业务需求。CRMEB的优势:快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护；
