什么是SPA和MPA
SPA：SinglePage Web Application，单页面应用，简称spa
MPA：MultiPage Application，多页面应用，简称mpa
对SPA的理解
SPA指只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。有着以下优点
- 具有桌面应用的即时性、网站的可移植性和可访问性
- 用户体验好、快，内容的改变不需要重新加载整个页面
- 良好的前后端分离，分工更明确
有以下缺点：
- 不利于搜索引擎的抓取
- 首次渲染速度相对较慢
SPA和MPA的区别
| 区别 | SPA | MPA |
|---|---|---|
| 结构 | 一个页面+多个模块组件 | 很多完整的页面 |
| 用户体验 | 页面切换快，体验好；但是首屏加载可能较慢，资源较多时可能需要做一些相关优化 | 页面切换慢，网速较慢的时候体验更差 |
| 资源文件 | 组件公用资源只需加载一次 | 每个页面都要加载公用资源 |
| 适用场景 | 对体验度和流畅度要求较高的应用，不利于SEO如（后台管理系统） | 适用于对SEO要求较高的应用，如京东、淘宝等电商平台 |
| 过度动画 | Vue提供了transition的封装组件，很容易实现 | 很难实现 |
| 内容更新 | 相关组件的切换，局部更新 | 整体HTML得切换，请求次数重复 |
| 路由模式 | 可以用hash，也可以用history | 普通跳转 |
| 数据传递 | 因为单页面，组件之间传递数据用Vuex可以完美解决 | 通过cookie，localstorage等缓存方案，Url传参，调接口保存等方式 |
| 相关成本 | 前期开发成本较高，后期维护较容易 | 前期开发成本较低，后期维护较麻烦 |
