单页面应用和多页面应用区别及优缺点

• 刷新方式：

SPA:相关组件切换，页面局部刷新或更改

MPA:整页刷新

• 路由模式：

SPA:可以使用hash，也可以使用history

MPA:普通连接跳转

• 用户体验：

SPA：页面片段间时间的切换，用户体验好，当初次加载文件过多时，需要做出相关调优

MPA：页面切换加载缓慢，流畅度不够，用户体验比较差，尤其网速慢得时候

• 转场动画：

SPA:容易实现转场动画

MPA:无法实现转场动画

• 数据传递：

SPA：容易实现数据传递，方式有很多【vuex 路由带参数传值】

MPA：依赖url传参，cookie，本地存储

• 搜索引擎优化：

SPA：需要单独方案，实现较为困难，不利于SEO，可以利用服务器端渲染（ssr）优化

MPA：实现方法容易

• 使用范围

SPA:高要求的体验度，追求界面流畅的应用

MPA：适用于追求高度支持搜索引擎的应用

• 开发成本

SPA：较高，长需要借助专业的框架

MPA：较低，但也页面代码重复的多

• 维护成本

SPA：相对容易

MPA：相对复杂

• 结构

SPA：一个主页面+许多模块的组件

MPA：许多完整的页面

• 资源文件

SPA：组件公用的资源只需要加载一次

MPA：每个页面都需要自己加载公用的资源

单页面应用

优点：操作体验流畅

前端组件化开发

前后端分离，实现API多用共享

缺点：首屏渲染加载资源多。

不利于搜索引擎，因为内容是动态生成的。

多页面应用

优点：有利于搜索引擎

相对来说首屏加载速度快

缺点： 页面切换效率低