Vue复习笔记 （二）SPA单页面应用（优化首屏加载）

一、概念

SPA（single-page application）：通过动态重写当前页面来与用户交互
代码通过单个页面的加载而检索，或者动态装载适当的资源并添加到页面

JS框架如 react, vue, angular, ember 都属于SPA

二、SPA和MPA的区别

MPA（MultiPage-page application）：每个页面都是独立的（ 都需要重新加载html、css、js文件，公共文件则根据需求按需加载 ）

三、 优缺点

优点：
1）具有桌面应用的即时性、网站的可移植性和可访问性
2）用户体验好、快，内容的改变不需要重新加载整个页面
3）良好的前后端分离，分工更明确
缺点：
1）不利于搜索引擎的抓取
2）首次渲染速度相对较慢

四、实现

1. 原理：
   1）监听地址栏中hash变化驱动界面变化
   2）用pushstate记录浏览器的历史，驱动界面发送变化

hash 模式：监听url中的hash来进行路由跳转
history模式：history 模式核心借用 HTML5 history api

• history.pushState 浏览器历史纪录添加记录
• history.replaceState修改浏览器历史纪录中当前纪录
• history.popState 当 history 发生变化时触发

五、给SPA做SEO

1. SSR服务端渲染
   将组件或页面通过服务器生成html，再返回给浏览器，如nuxt.js
2. 静态化
   目前主流的静态化主要有两种：
   （1）一种是通过程序将动态页面抓取并保存为静态页面，这样的页面的实际存在于服务器的硬盘中
   （2）另外一种是通过WEB服务器的 URL Rewrite的方式，它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址，一句话来说就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。
   这两种方法都达到了实现URL静态化的效果
3. 使用Phantomjs针对爬虫处理
   原理是通过Nginx配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

六、首屏加载

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

1️⃣ 加载慢的原因
1）网络延时
2）资源文件体积过大
3）资源重复发送请求
4）加载脚本的时候，渲染内容堵塞了

2️⃣ 解决方案
总的来讲可以分成两大部分 ：资源加载优化 和 页面渲染优化
资源加载优化：
减小资源大小（压缩，gzip）；减少http请求（缓存）；提高响应速度（CDN）；优化资源加载（按需加载，懒加载）
页面渲染优化：
优化html代码（减少dom，js外链底部，css外链顶部）；优化js，css代码（减少重绘，降低选择器复杂性）；优化动画效果（用transform/opacity）

1）减小入口文件体积
路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由
在vue-router配置路由的时候，采用动态加载路由的形式

routes:[ 
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')
]
1
2
3
4
5

以函数的形式加载路由，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会加载路由组件

2）静态资源本地缓存
利用localStorage

3）UI框架按需加载

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)
1
2
3
4

4）图片资源的压缩
对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力。

5）组件重复打包
在webpack的config文件中，修改CommonsChunkPlugin的配置

minChunks: 3 //表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件
1

6）开启GZip压缩
用gzip做一下压缩 安装compression-webpack-plugin

7）使用SSR
SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器
从头搭建一个服务端渲染是很复杂的，vue应用建议使用Nuxt.js实现服务端渲染