一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第27天，点击查看活动详情
是什么
SPA应用: 单页应用程序, 所有的功能, 都在一个页面中, 如果第一次将所有的路由资源, 组件都加载了, 就会很慢!
就是从输入网址址，到所有资源渲染到页面，首屏加载可以说是用户体验中最重要的环节，由于单页面应用，资源体积过大，首次进行全部加载耗时，导致白屏
在页面渲染的过程，导致加载速度慢的因素可能如下：
-
加载过慢 => 一次性加载了过多的资源, 一次性加载了过大的资源
-
加载过多 => 路由懒加载, 访问到路由, 再加载该路由相关的组件内容
-
加载过大 => 图片压缩, 文件压缩合并处理, 开启gzip压缩等
-
网络延时问题
-
资源文件体积是否过大
-
资源是否重复发送请求去加载了
-
加载脚本的时候，渲染内容堵塞了
解决方式
1. 配置异步组件, 路由懒加载
const login = () => import('../pages/login.vue')
2. 图片压缩
使用 webp 格式的图片, 提升首页加载的速度
将小图片base64化，或者使用在线字体图标、雪碧图减少服务器压力
3. CDN加速
配置CDN加速, 加快资源的加载效率 (花钱)
4. 按需加载
使用组件不要全部将整个框架导入，应该按需导入
全部导入：
import {Button} from 'element-ui'
5.使用SSR
SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器
从头搭建一个服务端渲染是很复杂的, Vue应用建议使用Nuxt.js实现服务端渲染
6.静态资源本地缓存
采用强制缓存和协商缓存，设置Cache-Control, Last-Modified, Etag字段
合理利用localStorage
7.配置externals
它所包含的文件类型将被排除，避免不必要的静态资源包含进来，导致编译出的文件过大
