1、SPA

  SPA（Single Page Application，单页面应用）是一种前端应用程序的架构模式。

  其中整个应用程序在加载时只加载一次，之后的页面导航和内容更新都通过动态地更新页面的部分内容，而不是重新加载整个页面。

提示

  其实，我们可以从 vue-router 实现导航栏切换效果中，快速的感受到什么是 SPA

  SPA 和传统的多页面应用程序有什么区别？

答案

  传统的多页面应用程序在用户导航时会向服务器发出请求并加载新的页面，这导致了页面之间的切换时会出现明显的延迟（一个地址代表一个网页）。

  而 SPA 则通过在首次加载时将应用程序的核心代码、HTML、CSS 和 JavaScript 资源一次性加载到浏览器中，之后的页面切换和内容更新通过 JavaScript 操作 DOM 来实现（一个地址代表一个路由组件）。

  其架构核心如下：

• 单页面加载
• 动态更新内容
• 前端路由
• 异步加载（页面、数据局部更新）

  现在流行的前端框架，如：AngularJS、React、Vue.js 等支持 SPA 架构模式。

  以 vue 为例：

SPA 架构	vue
单页面加载
动态更新内容	虚拟 DOM
前端路由	Vue Router
异步加载	组件懒加载、ajax 交互

2、微前端

  微前端是一种架构模式。

  它将前端应用程序拆分为多个小型、独立的部分，每个部分被称为微前端应用或微应用。

  每个微应用都可以独立开发、测试、部署和扩展，同时可以独立运行或与其他微应用组合成一个完整的前端应用。

微前端的设计目标是解决大型前端应用在开发和维护方面的挑战。它的主要思想是将前端应用程序分解为更小的、可管理的单元，类似于微服务的概念。