前端单页面SPA和多页面MPA的区别

单页面与多页面的区别
（1）单页应用（SinglePage Application ， SPA）
SPA（single-page application）单页面应用，是一种网络应用程序或网站的模型，它通过动态重写当前页面来和用户交互，这种方法避免了页面之间切换从而打断用户体验。在单页面应用中，所有必要的代码（比如HTML，JavaScript，CSS）都是通过单个页面的加载而检索，或者根据用户操作动态装载适当的资源并添加到页面上。页面在任何时间点都不会重新加载。我们熟知的vue，react，angular都属于单页面应用。它的结构类似下图。



（2）多页应用（MultiPage Application ， MPA）
MPA（MulitPage-page application）多页应用，每一个页面都是一个主页面，都是独立的，当我们在访问另一个页面的时候，都是需要重新加载HTML，JavaScript，CSS文件，公共组件则更具需要按需加载。它的结构类似于下图。


（3）两者区别