SPA单页面应用:指只有一个主页面的应用,一开始只需要加载一次css、js等相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页面应用跳转,就是切换相关组件,仅仅只是刷新局部资源
MPA多页面应用:指有多个独立页面的应用,每个页面都必须重新加载js、css等相关资源。多页面应用跳转,需要整页资源刷新
区别:
1.刷新方式
- SPA:相关组件的切换,页面局部刷新或者更改
- MPA:整页刷新
2.路由模式
- SPA:可以使用hash,也可以使用history
- MAP:普通的链接跳转
3.用户体验
- SPA:用户体验良好,切换页面知识局部刷新组件。因为是一次性加载所有资源,所以说首次进入的时候可能会有一段时间的白屏
- MPA:页面切换加载缓慢,流畅度不够,用户体验是比较差的
4.专场动画
- SPA:容易实现专场动画。
- MPA:无法实现专场动画。
5.数据传递问题
- SPA:容易传递数据,方法有很多,比如Vuex
- MPA:传递数据不方便,一般用url/cookie/本地存储
6.搜索引擎优化(SEO)
- SPA:需要单独方案,实现比较困难
- MPA:实现方法容易
7.使用范围
- SPA:高要求的体验度,追求页面的流畅
- MPA:使用于追求高度支持搜索引擎的应用
8.开发成本
- SPA:较高,因为需要借助框架。
- MPA:较低,但是代码比较多
9.维护成本
- SPA:比较低
- MPA:比较高
10.结构
- SPA:一个主页面+许多模块组件
- MPA:许多完整的页面
11.资源文件
- SPA:组件公用的资源文件只需加载一次
- MPA:每个页面都需要加载自己的资源