本文内容主要来自 https://juejin.cn/post/7000660847018115085

定义

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

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

区别


 SPA MPA
刷新方式 相关组件切换，页面局部刷新或更改 整页刷新
路由模式 可以使用 hash，也可以使用 history 普通链接跳转
用户体验 页面切换快，用户体验良好
初次加载文件过多时，需要做相关调优		 页面切换加载缓慢，流畅度不够，
用户体验比较差，尤其网速慢的时候
转场动画 容易实现转场动画 无法实现转场动画
数据传递 容易实现数据传递，方法有很多
（通过路由带参数传值，vuex 传值等等）		 依赖 url 传参、cookie、本地存储
搜索引擎优化（SEO） 需要单独方案，实现较为困难。
可利用服务器端渲染（SSR）优化		 实现方法容易
使用范围 用户体验要求高、追求界面流畅的应用 适用于追求高度支持搜索引擎的应用
开发成本 较高，常需要借助专业的框架 较低，但页面代码重复的多
维护成本 相对容易 相对复杂
结构 一个主页面 + 许多模块的组件 许多完整的页面
资源文件 组件公用的资源只需要加载一次 每个页面都需要自己加载公用的资源