[JavaScript知识库] 【Vue相关】单页面应用(SPA)与多页面应用(MPA)的区别

SPA（单页面应用） 只有一个主页面的应用，一开始只需要加载一次js、css等相关资源，所有内容都包含在主页面，对每一个功能模块组件化。页面的跳转，实际上就是切换相关组件，仅仅刷新局部资源。

MPA（多页面应用） 有多个独立页面的应用，每个页面必须重复加载js、css等相关资源，多页面应用的跳转需要刷新整页的资源。

对比如下：

对比项	SPA	MPA
结构	一个主页面+许多模块的组件	许多个完整的页面
体验	页面切换快，体验良好；但是初次加载文件过多时，需要做相关的调优	网速慢的时候页面切换慢，体验不好
资源文件	组件公用的资源只需要加载一次	每个页面都要自己加载公用的资源
适用场景	对体验度和流畅度有较高的要求，但不利于SEO	适用于对SEO要求较高的应用
过渡动画	Vue提供了transition的封装组件，容易实现	较难实现
内容更新	相关组件的切换，即局部更新	整体HTML切换，重复的HTTP请求
路由模式	hash模式 or history模式	普通的链接跳转
数据传递	使用全局变量（Vuex）	cookie、localStorage等缓存方案，URL参数等
相关成本	前期开发成本较高、后期维护较为容易	前期开发成本低、后期维护比较麻烦（可能牵一发而动全身）

加:2021-12-28 22:49:56 更:2021-12-28 22:51:49

-2025/12/5 8:31:43-

网站联系: qq:121756557 email:121756557@qq.com IT数码