SPA、MPA 的优缺点

SPA 优点，我认为更多是在软件工程方面，SPA 形式可以做到前后端彻底分离，只要制定好 API 规范，那么前后端就可以独立开发，并且一套 API 可以同时供多个「端」使用。同时，SPA 倾向于将更多的业务逻辑移动到前端实现。此外，前端有了更好的模块化工具，可复用组件以 js 库的形式进行复用，更容易维护（相比 MPA，通常复用是由模板系统提供的能力）。此外，利用 webpack 的 loader 机制，可以实现更集约化的模块，例如 Vue 的 Single File Component，将相关的 html、css、js 代码集中在一起管理。

SPA 的缺点，我觉得有几方面：

在刷新网页（或从其他地方跳转过来）时用户体验不佳。由于 SPA 所有的数据都需要通过 API 获取，对于内容型网页，首次打开时，需要先加载 SPA 的代码，启动 SPA 应用，然后再通过 API 获取数据，有时候可能需要获取多种数据，需要多次 API 请求，用户体验并不是很好。（虽然可以用服务端渲染 SSR 技术，但该技术带来的额外成本并不低，包括运维成本，也包括一些代码上的妥协）
全局状态管理，对开发者要求很高。例如现在 vue-app 的启动逻辑，我相信大多数开发者都无法做到了如指掌。例如登录页面会有许多入口，应用内跳转、用户直接打开、微信授权后回跳等等，有些途径过来不需要请求 GetUserinfo，有些途径过来需要，像微信授权回跳这种，不少逻辑原本可以直接在后端做的，也不得不在前端实现一遍。这些因素提高了对前端开发者能力的要求。
单页应用虽然将一些逻辑移动到了前端，但后端的开发成本并没有降低。
对 SEO 不友好。这个其实应该 blame 百度，而不是单页应用技术本身。目前主流搜索引擎应该都对 SPA 很友好，唯独百度不行。

MPA 优点，上述 SPA 的缺点都对应 MPA 的优点，这里不再复述一遍。对于“澄清”一些大家可能会觉得是 MPA 缺点的方面：

许多开发者可能对于页面内的交互操作的印象都是 jQuery，不支持数据双向绑定（或者很麻烦），代码笨重。但实际上单页应用也可以使用Vue、React等工具来“接管”页面内的一些组件，甚至整个页面。
难以搭配 webpack 工具链使用。在网上这方面的 best practice 确实很少。此外，对于哪些东西由 MPA 模板引擎渲染、哪些由 js framework 渲染，这两者如何结合，对于这个边界问题，许多开发者可能难以把握。不过目前我已经有一个逐渐清晰起来的方案，也正是这篇文档中后面要讲的东西。

MPA 缺点，同样，与 SPA 的优点对应。前后端代码没有很好的解耦，前端开发者需要有一定的后端代码阅读和开发能力，在分工开发时如何协调 commit 之间的冲突也是一个比较麻烦的事。

那么，什么情况下适用 SPA、什么情况下适用 MPA？以下是一些“简单粗暴”的建议：

要考虑 SEO 时，用 MPA。我认为 MPA 的附加成本是低于 SSR 的。
对于入口比较多的页面（比如登录页面、扫码进入的页面等），使用 MPA。必要时 MPA 和 SPA 可以混合使用，即部分页面使用 MPA，其他页面使用 SPA。
类似网页形式的应用，使用 SPA。
移动应用（不含小程序），鼓励使用 MPA。

SPA、MPA 的优缺点相关推荐

详说SPA（单页应用）和MPA（多页应用）
一. 什么是SPA? SPA(single-page application),翻译过来就是单页应用. SPA是一种特殊的web应用.将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相 ...
SPA和MPA的区别
单页面与多页面的区别 (1)单页应用(SinglePage Application , SPA) 指只有一个主页面的应用,一开始只需要加载一次js,css等相关资源.所有的内容都包含在主页面,对每一个 ...
【SPA】SPA单页面应用详解
一.什么是SPA 单页应用SPA是一种网络应用程序或网站的模型,它通过动态重写当前页面来与用户交互. 这种方法避免了页面之间切换打断用户体验在单页面应用中,所有必要的代码(HTML.JavaScrip ...
前端面试题——Vue 高频
目录一.Vue的基本原理二.双向数据绑定的原理三.MVVM.MVC.MVP的区别四.Computed 和 Watch 的区别五.Computed 和 Methods 的区别六.v-if 和 ...
【前端路由原理--原生JS实现方式】--前后端路由的区别、关于单页面应用与多页面应用、什么是CSR、SSR、SSG、ISP
前言本来只是想学习 React-Router v6 ,没有想到,带出了这么多东西.前后端路由有什么区别?SPA与MPA的是什么?在了解到前端路之后又发现单页面于应用与多页面应用的不同之处,以及 .n ...
react 前端解析二进制流_一年半前端跳槽面试经验（头条、微信、shopee）
在2019年末的时候,突然想搞点大事,思来想去,感觉只有跳槽是最刺激的. 由于我比较懒,不想换城市,所以这次只面试了头条.微信和 shopee.十分幸运,都拿到了 offer.接下来就简单的说下大家关 ...
前端路由跳转丢失端口号_如何在应用架构中设计微前端方案 icestark
文末福利:淘系前端团队 618 实践小册微前端在 2016 年 ThoughtWorks 的一个技术雷达上面提出后,不断有团队尝试将单体的前端 web 应用按不同维度进行拆分或者组合,再聚合到一个整 ...
2021届前端面试知识点（其他）
2021届前端面试知识点(其他) 1. 什么是"前端工程化"? 2. xss跨站脚本攻击原理?如何进行?防御手段? 3. CSRF跨站请求伪造原理?如何进行?防御手段? 4. Sq ...
单页应用多页应用的区别
前言最近看到一些人在问单页面和多页面应用的区别.所以也就输出这一篇短文希望可以给你一个整体的认识. 这里也会大体介绍单页应用实现的核心 -- 前端路由. 单页应用 VS 多页应用对比图单页应用( ...

SPA、MPA 的优缺点

SPA、MPA 的优缺点相关推荐

最新文章

热门文章