多页面应用MPA与多页面应用SPA的优缺

提示：此处说的多页面应用问题均指传统开发模式下的多页面，而非在现代框架下衍生出来的多页面。

多页面应用（MPA）

多页面应用（Multi-Page Application）简单的说就是指一个应用中有多个页面，页面跳转时是整页刷新。

优点

• 页面首屏速度快，因为页面的所有内容都在一个html中，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。
• SEO友好，搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在Html中，容易被搜索引擎收录

缺点

• 首先是开发成本高，传统的多页面应用缺少现代式的框架支持，大多说需要基于类似PHP之类的语言支持。
• 页面之间的跳转速度慢，需要重新加载新的资源，页面会显得比较卡顿。
• 不利于做前后端分离。

单页面应该（SPA）

SPA（Single Page Application）单页应用程序它将所有的活动局限于一个Web页面中。单页应用的跳转，只是切换相关组件，刷新局部资源。

优点

• 用户体验好，页面切换响应速度快（但是存在首屏加载慢的问题）。
• 可以很好的进行前后端分离开发，开发沟通成本低，大大缩短开发工期。
• 无需重新刷新整个页面即可做到局部数据刷新。
• 可以在现代框架的基础上使用工程化工具等。
• 页面切换可以增加动画效果。
• 脱离了页面跳页面的框架，让整个网站形成一个Web App，更接近原生App的访问体验

缺点

• 首屏加载速度慢，因为需要一次性加载所有资源。
• 不利于SEO

缺陷解决方案

针对首屏加载速度过慢的问题，可以对页面路由、组件采用异步加载方案，UI框架资源按需加载（tree-shaking）。

页面加载增加loading或者骨架屏的方案，减少用户等待的焦虑。

接合现在打包工具对页面资源预加载、资源压缩等。

总结

对比项	SPA	MPA
项目结构	一个主页面+若干路由组件	多个完整的页面
用户体验	首次加载速度慢，后续页面切换响应速度快	多个页面切换慢
资源文件	公用资源只需加载一次	每个页面都需要加载自己的公用资源
适用场景	后台管理系统等不需要SEO的应用	适用于对SEO要求高的应用，例如商城等
页面效果	切面页面可以轻松实现动画效果	不利于实现
刷新方式	切换组件可以局部更新数据内容	需要整页刷新
数据处理	单页面可以使用VUEX等共享数据	浏览器本地缓存，URL参数等方式
开发维护成本	借助现代开发框架+打包工具，前后端分离、组件化等	开发成本高